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!

Lynel Hudson · Answer 1 · 2015-03-29T22:57:15.517

0

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

edited Mar 29 '15 at 22:57

answered Mar 29 '15 at 16:27

Lynel Hudson

2,335
1
18
34

But I need the dynamic width for the images because my idea is to have 100% page height images (where both sizes are dynamic), so it would be a row of images with no gaps between them, that take 100% of the page in height. Everything works, but image containing divs take the width of the real image file instead of the computed width. – Kostsei Kuolematon Mar 29 '15 at 16:41
@KostseiKuolematon Can you edit your question to show us a screenshot or more of the code you are using? I'm not sure I understand your question fully. Here is a link to a JSBIN using your code. The image is distorting because the height is set to 100%: http://jsbin.com/xopujarelo/1/edit?html,css,output – Lynel Hudson Mar 29 '15 at 16:45
@KostseiKuolematon I just updated my answer with an example from jsBin. Let me know if this answer meets your needs. – Lynel Hudson Mar 29 '15 at 22:58
http://jsbin.com/decejuroga/1/edit?html,css,js I need to remove the black spaces between the pictures. – Kostsei Kuolematon Mar 29 '15 at 23:04
@KostseiKuolematon I removed the black spaces between the pictures. Did you look at my new JSBin above? Please look at my answer and click the green check next to it if it answers your question to help future visitors as well. **Look at my edit** Here is a screenshot: http://pasteboard.co/2b2IhtBf.png – Lynel Hudson Mar 29 '15 at 23:06
I know that removing `height: 100%` from the image's style works this way, but did you notice that the images now are going behind the edge of the page?(: I've made them 100% height exactly because I need the entire image to fit the height of the page with no scroll-bars. So I simply need each image containing div to have the computed width of an image it contains. – Kostsei Kuolematon Mar 29 '15 at 23:37
@KostseiKuolematon The image size isn't the problem, it's the div size. Maybe take everything out of the table? The table row could be adding the unwanted space. Rethink your structure is the best advice I have. – Lynel Hudson Mar 29 '15 at 23:58
This is kind of dumb, but you could also edit the image files to have extra black space above and below them then remove `style="height:100%;"` ...just throwing that out there. – Lynel Hudson Mar 30 '15 at 00:05
Thank you, but the images have to fit the page with no black space anywhere. – Kostsei Kuolematon Mar 30 '15 at 00:30

Div has image's real width instead of computed width

1 Answers1