使用 css 在 div 上保持纵向纵横比

Question

鉴于：

.col-1 {width: 12.5%;}
.col-2 {width: 25%;}
.col-3 {width: 37.5%;}
.col-4 {width: 50%;}
.col-5 {width: 62.5%;}
.col-6 {width: 75%;}
.col-7 {width: 87.5%;}
.col-8 {width: 100%;}

我希望每个列的高度为其宽度的 150%。

我看过 - 但这里引用视口是不够的，因为有些列可能跨越屏幕的 1/8，而其他列可能跨越 1/4 等，而视口高度将保持不变。

我见过 css calc() function proposed（例如，在列中的子元素 div 上）- 但我不知道如何引用父元素的宽度。根据 W3Schools，% css 度量单位应该是相对于父元素的 - 但我想根据父元素宽度设置子高度，这是不同的度量。

W3Schools 也有一个 tutorial on maintaining aspect ratios，通过将 padding-top 添加到包含的 div，作为百分比。例如，

padding-top: 66.66%;

将保持3:2横向纵横比。但是如果我设置：

padding-top: 150%;

那么是的，我们得到了纵向比例2:3但是100%宽度div的高度超过了[=51]的高度=].如果我试图通过将其宽度设置为：

来减小 div 整体的大小

width: 25%;

然后列的宽度确实减小了，但它的高度仍然是屏幕高度的 150%。

关于使用 8 列布局和能够将 div 设置为 1 到 8 列宽度并让浏览器自动将 div 的高度设置为 150% 的任何建议它的宽度？

Answer 1

基于填充解决方案，类似这样的方法可行，但这样的标记非常丑陋，而且根据您要放入其中的内容，这可能是一件很糟糕的事情。

.col-1 {width: 12.5%;}
.col-2 {width: 25%;}
.col-3 {width: 37.5%;}
.col-4 {width: 50%;}
.col-5 {width: 62.5%;}
.col-6 {width: 75%;}
.col-7 {width: 87.5%;}
.col-8 {width: 100%;}

.height-ratio {
    position: relative;
    overflow: auto;
    background: #ddd;
}

.height-ratio::before {
    display: block;
    width: 100%;
    padding-top: 150%;
    content: "";
}

.content {
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    padding: .25em;
}

<div class="col-1 height-ratio">
    <div class="content">
        some thing some thing some thing some thing some thing some thing some thing some thing some thing some thing some thing some thing some thing some thing some thing some thing some thing some thing some thing some thing some thing some thing some thing some thing some thing some thing some thing some thing some thing some thing some thing some thing some thing some thing some thing some thing some thing some thing some thing some thing some thing some thing some thing some thing some thing some thing some thing some thing some thing some thing
    </div>
</div>

使用 css 在 div 上保持纵向纵横比

Maintain portrait aspect ratio on div using css

css

height

dependencies

aspect-ratio

width