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 на boundrary ширину, что ширина изображения не может превышать, а затем установить ширину изображения, чтобы width:100% в CSS.

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