Div has image's real width instead of computed width

Question

I have several div elements which contain images, every image's height is set to 100%, width is calculated. Height works fine, but the parent div has image's real width, wich is larger then computed width. That makes gaps between the images. How can I make div to have the width of the image as it is displayed (not the width of the file itself)? Could that be solved with html/CSS only?

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;
}

Any ideas? Tnanks!

Answer 1

Yes, this can be solved with only CSS and HTML. You can set the width of your image with CSS. First give your image element an id like <img id="img1" style="height:100%;" src="001.png"> then give the image the desired width with CSS: #img1{ width:150px; }.

or

You could set the width of your parent div to a boundrary width that the image width cannot exceed, then set the width of the images to width:100% in CSS.

Edit: Given your new JSbin: to remove the black space between the images, simply remove style="height:100%" from each image. What is happening is the browser is slightly shrinking the images to keep them 100% of the height of the window, which creates the black space. I hope this helps. Here is jsBin: http://jsbin.com/kupaqukizu/1/edit?html,css,js,output