您可以使用具有所需比例的图像来帮助按比例调整大小(可以通过将一维设置为某个值,另一维设置为“自动”来按比例缩放图像)。图像不必是可见的,但必须占用空间。
.box { position: absolute; bottom: 0; left: 0; height: 50%;}.size-helper { display: block; width: auto; height: 100%;}.inner { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: rgba(255, 255, 153, .8);}<div > <img src="https://www.mshxw.com/skin/sinaskin/image/nopic.gif" width="200" height="100"> <div > 1. box has fluid height<br> 2. img has 2:1 aspect ratio, 100% height, auto width, static position<br> 2.1 it thus maintains width = 200% of height<br> 2.2 it defines the dimensions of the box<br> 3. inner expands as much as box </div></div>在上面的示例中,box,inner和helper的大小都相同。



