Div имеет реальную ширину изображения вместо вычисленной ширины

Question

У меня есть несколько элементов div, которые содержат изображения, высота каждого изображения установлена ​​на 100%, ширина рассчитывается. Высота работает нормально, но родительский div имеет реальную ширину изображения, которая больше вычисленной ширины. Это делает промежутки между изображениями. Как я могу сделать div, чтобы ширина изображения отображалась (а не ширина самого файла)? Может ли это быть решено только с помощью HTML /CSS?

HTML:

<table>
   <tr>
      <td align-"center" valign="middle" style="background:#000;">
         <div class="scrollable"> 
            <div class="items">
               <div>
                  <img style="height:100%;" src="001.png"> 
               </div>
            </div>
         </div>
      </td>
   </tr>
</table>

CSS:

table {
    width: 100%; 
    height: 100%; 
    padding: 0; 
    margin: 0; 
    border-collapse: collapse; 
    border: 0;
}

td {
    width: 100%; 
    height: 100%; 
    padding: 0; 
    border: 0;
}

.scrollable {
    position: relative; 
    overflow: hidden;
    width: 100%; 
    height: 100%; 
    max-height: 1000px;
}

.scrollable .items {
    width: 25000px; 
    height: 100%; 
    position: absolute;
}

.items {float: center;}

.items div {
    float: left; 
    width: auto;
    padding: 0;
    margin: 0;
}

Есть идеи? Tnanks!

Answer 1

Да, это можно решить только с помощью CSS и HTML. Вы можете установить ширину вашего изображения с помощью CSS. Сначала дайте элементу изображения идентификатор, подобный <img id="img1" style="height:100%;" src="001.png"> затем придать изображению желаемую ширину с помощью CSS: #img1{ width:150px; },

или же

Вы можете установить ширину родительского div равной ширине, которую ширина изображения не может превышать, а затем установить ширину изображений в width:100% в CSS.

Изменить: учитывая ваш новый JSbin: чтобы удалить черное пространство между изображениями, просто удалите style="height:100%" с каждого изображения. Происходит то, что браузер немного сжимает изображения, чтобы сохранить их на 100% высоты окна, что создает черное пространство. Надеюсь, это поможет. Вот jsBin: http://jsbin.com/kupaqukizu/1/edit?html,css,js,output