CSS：保持元素对于给定高度的高宽比

对于这种情况，以上对可能重复的链接不是解决方案，因为高度对于多个断点是固定值。CSS：保持元素对于给定高度的高宽比

我有一些DIV与display:inline-block，所以他们漂浮在一起很好。这些DIV都具有相同的高度，例如height:300px。后来，我会用Ajax在每个DIV中加载一个图像，并且我希望DIV保持图像的高宽比，所以当图像实际加载时，它们不会四处摆动。

所以当DIVs在浏览器中显示时，图像还没有出现，所以用height:auto;固定图像的高度将不起作用。

样品的编号：

<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 */ 
}

现在我知道如何保持的元件的纵横比为给定宽度（参见here或here ）。但是由于我的DIV应该都具有相同的高度，我怎样才能保持宽高比并改变宽度？

一个（不是很好）解决方案是插入一个空白图像并将该图像的大小调整为正确的尺寸。

问题是：调整窗口大小时，所有DIV的高度都会改变，所以只计算宽度是不够的。我可以用Javascript重新计算宽度，但我更喜欢纯CSS版本（如果可能）。

所以，这里是我的问题：我怎样才能保持一个元素的高宽比为一个给定的高度只有CSS？

感谢

来源

2014-09-19 uruk

[保持div高宽比]（http：// stackoverflow。com/questions/23789143 /维持长宽比 - 根据高度） – 2014-09-19 06:40:53

感谢您的链接，但在我的示例中，DIV具有固定的高度。 – uruk 2014-09-19 06:49:34

您有宽高比但不是实际的图像尺寸。我认为你可以使用calc函数。 浏览器支持是一个问题，但：

/* 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>

在上面的演示中，第一组的div将是45像素宽，第二组将是40像素宽。

来源

2014-09-19 11:01:07

这是最接近的解决方案，谢谢。由于每个项目的比例不同，因此我将通过在domready事件中使用Javascript来更改宽度。 – uruk 2014-09-19 11:08:04

当你生成div时你有什么信息？如果div是通过（例如）PHP生成的，并且你有宽度和高度，那么你可以内联样式。 – 2014-09-19 11:15:23

确实如此，但高度在样式表中，有几个断点 – uruk 2014-09-19 11:32:38

我会根据我使用模板设置DIV的宽度，所以这将是有求必应，加入到我的代码：

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

这将确保你可以控制DIV，而图像很好地适合于

注意你可能想要将其更改为max-height：300px;对于响应式网站

来源

2014-09-19 07:13:11 PalDev

你是对的，但图像尚未加载，只是包装DIV。在编写DIV时，我知道图像比率 – uruk 2014-09-19 10:30:11

但是当加载时，它会自动设置 – PalDev 2014-09-19 11:02:19

是的，但这会导致屏幕上所有项目的摆动。这是我想绕过的。 – uruk 2014-09-19 11:09:10

CSS：保持元素对于给定高度的高宽比

回答

相关问题