图片自适应宽度且保持长宽比的实现方法

[shiiiiiiji]

在业务过程中，经常会收到UI这样的要求：

UI：这里的banner图后台会配置好，我们给他们固定尺寸（比例）的图片，你这里要根据保证宽度自适应，而且长宽比要保持750*180的比例。
FE：好的，没问题

可是，在实现过程中，如果设置：

img{
  width: 100%;
  height: ?
}

高度如何设置呢，24%？——不对呀，高度一般是参照父容器元素的height，宽度虽然自适应了，但是怎么让高度是参照宽度的比例来设置呀？

后来查资料过程中发现，padding属性如果给定百分比值时，是参照包含容器宽度的：

The size of the padding as a percentage, relative to the width of the containing block.
参见https://developer.mozilla.org/en-US/docs/Web/CSS/padding

就可以以下面方式来实现：

.banner-item{
  width: 100%;
  height: 0;
  padding-bottom: 24%;
  background: url('https://dummyimage.com/750x180/ddd/fff') no-repeat center;
}

[shiiiiiiji]

发现设置后如果再在其中嵌入容器正常情况下无法继承真实height，得到的高度为0，但是设置为position: absolute后就能够继承父容器的真实高度（包含padding），why？

有人说绝对定位元素是相对于定位元素的边界，具体原因待查。

[shiiiiiiji]

发现一篇文章比我写得好，记下来：
CSS实现宽高等比例自适应矩形