css - flexbox CSS 可以根据宽高比调整大小吗？

Question

我有一个响应列，然后分为 3 个相等的子列。

我在每个图标中都有一个宽度为 100% 的图标占位符。有没有什么方法可以使用 CSS 的 flex 来确保我的高度始终等于我计算出的宽度？

如果可能的话，我真的想避免使用图片和 JavaScript。

Answer 1

您可以使用两种方法。一种是使用 vw 设置 flexbox 的高度。如果需要，您还可以使用 calc。当然，如果页面宽度在更宽的视口(viewport)上变为静态或设置了 max-width，那么您可以使用媒体查询以 px 为单位设置 flexbox 高度， em 等

第二种方法是在 flexbox 子元素上使用填充。与边距不同，100% 顶部或底部填充意味着 100% 的父宽度而不是高度。

.flex {
    display: flex;
    background-color: red;
    margin-bottom: 1px;
}
.flex div {
    flex: 1;
    background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIyOS4wMzE4MTMiIHZpZXdCb3g9IjAgMCAzMiAyOS4wMzE4MTMiPgo8ZyB0cmFuc2Zvcm09Im1hdHJpeCgwLjAzMTI1LDAsMCwwLjAzMTI1LDAsLTAuOTY4MTg3NSkiPgo8cGF0aCBkPSJNIDEwMjQsNTkwLjQ0NCA1MTIsMTkzLjAxOCAwLDU5MC40NDYgMCw0MjguNDA4IDUxMiwzMC45ODIgMTAyNCw0MjguNDEgWiBNIDg5Niw1NzYgbCAwLDM4NCAtMjU2LDAgMCwtMjU2IC0yNTYsMCAwLDI1NiAtMjU2LDAgMCwtMzg0IDM4NCwtMjg4IHoiLz4KPC9nPgo8L3N2Zz4K) center no-repeat;
    background-size: 50%;
}
.flex.vw {
    height: 16.67vw;
}
.flex.padding div {
    padding-top: 16.67%;
}

<div class="flex vw">
    <div></div>
    <div></div>
    <div></div>
</div>
<div class="flex padding">
    <div></div>
    <div></div>
    <div></div>
</div>