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

Question

是否可以让div（或其他元素）使用CSS调整其高度相对于其宽度（或相反）？基本上，为了使它具有百分比宽度的图像在浏览器窗口调整大小时按比例调整大小的方式？

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

Answer 2

查看this相关问题。简而言之：不，仅使用CSS

是不可能的