首页 文章

CSS：保持给定高度的元素的纵横比

提问于
浏览 次
2

上述可能重复的链接不是这种情况的解决方案，因为高度将是几个断点的固定值 .

我有一些带有 display:inline-block 的DIV，所以它们并排漂亮地漂浮着 . 这些DIV都具有相同的高度，例如 height:300px . 稍后，我将使用Ajax在每个DIV中加载一个图像，我希望DIV保持图像的宽高比，这样当图像实际加载时它们不会四处摆动 .

因此，当在浏览器中显示DIV时，图像尚未存在，因此用 height:auto; 固定图像的高度将不起作用 .

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

现在我知道如何 keep the aspect ratio of an element for a given width （见here或here） . 但由于我的DIV应该都具有相同的高度，我如何保持纵横比并改变宽度？

一个（不是很好）解决方案是插入空白图像并将此图像调整到正确的尺寸 .

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

So here is my question: 如何仅通过CSS保持给定高度的元素的宽高比？

谢谢

html css css3

2 回答

  • 0

    您有纵横比但不是实际图像尺寸 . 我想你可以使用calc函数 . 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>

    在上面的演示中，第一组div的宽度为45px，第二组的宽度为40px .

    回复于
  • 0

    我会根据我正在使用的模板设置DIV的宽度，因此它会响应，并将其添加到我的代码中：

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

    这将确保您可以控制DIV，同时图像很适合

    因为你可能想把它改成最大高度：300px;对于响应式网站

    回复于

相关问题