css 按比例调整 div 大小，类似于图像调整大小

Question

是否可以使用 CSS 使 div(或其他元素)相对于其宽度(或相反)调整其高度？基本上，要使其表现得像具有百分比宽度的图像随着浏览器窗口大小的调整而按比例调整大小？

Answer 1

如果您想设置相对于 .parent 元素的宽度或高度，并且您知道需要保持的宽高比，则可以执行以下操作:

.parent{
    width: 150px;
}
.child{
    width: 100%;
    padding-top: 50%; /* outer height will be 75px (150px*0.5) */
}

请注意，您依赖于高度(或宽度)为 0 并仅根据填充来定义它。因此，如果您想添加任何内容，您可能需要将其包装在 .child 内的绝对定位 div 中。请参阅this fiddle举个例子