2

The above link to a possible duplicate is not a solution for this case, because the height will be a fixed value for several breakpoints.

I have some DIVs with display:inline-block, so they are floating nicely side by side. These DIVs all have the same height, e.g. height:300px. Later, I will load an image inside every DIV with Ajax, and I want the DIV to keep the aspect ratio of the image, so they won't wiggle all around, when the image is actually loaded.

So when the DIVs are displayed in the browser, the images are not yet there, so fixing the height for the image with height:auto; won't work.

Sample code:

<div class="wrapper">
    <div class="item">...</div>
    <div class="item">...</div>
    <!-- More items here -->
</div>

CSS:

.item {
    display:inline-block;
    vertical-align:top;
    height: 300px;
    width: /* depending on the image ratio */
}

Now I know how to keep the aspect ratio of an element for a given width (see here or here). But since my DIVs should all have the same height, how can I keep the aspect ratio and change just the width?

One (not really good) solution would be to insert a blank image and to resize this image to the right dimensions.

The problem is: when resizing the window, the height of all the DIVs will change, so just calculating the width is not enough. I could recalculate the width with Javascript, but I prefer a plain CSS version (if possible).

So here is my question: how can I keep the aspect ratio for an element for a given height by CSS only?

Thanks

uruk
  • 1,094
  • 2
  • 14
  • 26
  • possible duplicate of [Maintain aspect ratio of a div according to height](http://stackoverflow.com/questions/23789143/maintain-aspect-ratio-of-a-div-according-to-height) – web-tiki Sep 19 '14 at 06:40
  • Thank you for your link, but in my example, the DIVs have a fixed height. – uruk Sep 19 '14 at 06:49

2 Answers2

0

I would set the width of the DIV according to template I'm using, so it would be responsive, and add this to my code:

img.item {
width:auto; height:300px;width: auto\9; // for IE
}

This will make sure you could control the DIV while the images would fit there nicely

Mind due you may want to change it to max-height:300px; for responsive site

PalDev
  • 566
  • 8
  • 12
  • You are right, but the image is not yet loaded, just the wrapping DIV. When writing the DIV, I know the image ratio – uruk Sep 19 '14 at 10:30
  • But when loaded, it would be set automatically – PalDev Sep 19 '14 at 11:02
  • Yes, but this will cause the wiggling of all the items on screen. This is what I wanted to bypass. – uruk Sep 19 '14 at 11:09
0

You have the aspect ratio but not actual image dimensions. I think you can use the calc function for this. Browser support is an issue though:

/* Note: using 30px height for demonstration */
 .item {
    display: inline-block;
    vertical-align: top;
    height: 30px;
    background: #FC0;
}
.ratio-3-2 .item {
    /* 3:2 = 1.5 */
    width: calc(30px * 1.5);
}
.ratio-4-3 .item {
    /* 4:3 = 1.3333 */
    width: calc(30px * 1.3333);
}
<div class="wrapper ratio-3-2">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>
<div class="wrapper ratio-4-3">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

In the above demo, the first set of divs will be 45px wide and the second set will be 40px wide.

Salman A
  • 262,204
  • 82
  • 430
  • 521
  • This is the closest solution, thank you. Since the ratio is different for each item, I will nevertheless change the width by using Javascript within a domready-event. – uruk Sep 19 '14 at 11:08
  • What information do you have when you generate the divs? If divs are generated via (e.g.) PHP and you have width and height then you can inline the styles. – Salman A Sep 19 '14 at 11:15
  • Exactly, but the height is inside a stylesheet, with several breakpoints – uruk Sep 19 '14 at 11:32