CSS: Keep Aspect Ratio of an Element for Given Height

问题

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

回答1:

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.

回答2:

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

来源：https://stackoverflow.com/questions/25927521/css-keep-aspect-ratio-of-an-element-for-given-height

标签

html

css

css3