缩放方形div以适合父div,同时保持纵横比

时间:2016-12-16 18:48:04

标签: html height fixed aspect-ratio

所以这让我疯狂,我想知道是否有办法用纯CSS做到这一点。我想要做的是有一个固定高度的父div(紫色)。在紫色div里面,我希望橙色div保持纵横比,并扩展到父div的高度。如果我改变父div的大小,橙色div应相应地按其宽高比进行缩放。

注意:尝试在没有图像或百分比父级高度的情况下执行此操作。

参见示例: enter image description here

1 个答案:

答案 0 :(得分:0)

你可以用一些简单的JS来做。只需获取子(或父)的高度并设置宽度。您可以根据需要使用计算来获得所需的比率。

var width = document.getElementById('child').offsetHeight;
document.getElementById('child').style.width = width + 'px';
#parent{
  width: 100%;
  height: 100px;
  background-color: purple;
}
#child{
  height: 100%;
  background-color: yellow;
}
<div id="parent">
  <div id="child"></div>
</div>