css_使图片保持长宽比等比缩放

• 在开发中经常遇到需要图片按某个纵横比显示, 并且等比缩放; 比如现有以下需求: 一张header图片, 按照长宽比5:2进行显示并能进行等比缩放

• 思路: 当padding/margin 的值是百分比时, 是以父元素的宽度来进行计算的

<div id="container">
  <div id="content">
    <img src="./public/imgs/v2-f8054589c3454b0398b9e081182af89f_r.jpg" alt="">
  </div>
</div>

#container {
  width: 50vw;
  height: auto;
  position: relative;
  border: 2px solid #000;
}

#content {
  width: 100%;
  height: 0;
  padding-top: 120%;
  position: relative;
  overflow: hidden;
}

#content>img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
}