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％。

我见过solutions for width to be calculated based on height that use the viewport's height-但在这里引用视口并不足够，因为某些列可能跨越屏幕的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的 landscape 长宽比。但是如果我设置：

padding-top: 150%;

然后是的，我们得到的肖像比率为2：3，但是100％宽度div的高度超过了窗口的高度。如果我尝试通过将其宽度设置为以下来减小div的整体大小：

width: 25%;

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

关于使用8列布局以及能够将div设置为1到8列的宽度的任何建议，让浏览器自动将div的高度设置为其宽度的150％吗？

Answer 1

基于填充解决方案，类似的方法可能会起作用，但这在标记方面是非常丑陋的，并且根据要放入其中的内容，这可能是一件很糟糕的事情。

Singlestat Panel

.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;
    width: 100%;
    padding-top: 150%;
    overflow: auto;
    background: #ddd;
}

.content {
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    padding: .25em;
}

使用CSS在div上保持纵向宽高比

1 个答案: