html - 我可以使用 CSS 按比例缩放 div 的高度吗？

Question

我可以在 CSS 中设置任何变量吗，就像我希望我的 div 高度始终是宽度的一半一样，我的 div 随屏幕大小缩放，div 的宽度以百分比表示

<div class="ss"></div>

CSS:

.ss {
    width:30%;
    height: half of the width;
}

这 30% 的宽度随屏幕分辨率变化

Answer 1

您可以借助父项的内边距来做到这一点，因为相对内边距(甚至高度方向)是基于父元素的宽度。

CSS:

.imageContainer {
    position: relative;
    width: 25%;
    padding-bottom: 25%;
    float: left;
    height: 0;
}

img {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
}

这是基于这篇文章: Proportional scaling of responsive boxes using just CSS