实现宽高等比例

宽高比为5：1的比例

box { 
    padding：10％ 50％;
    position：relative;
}
.box > img {
    position：absolute;
    width：100％; height：100％;
    left：0; top：0;
}

<div class="container">
  <div class="box">
    <img src="https://calbum.qiniu.songxingguo.com/album/0/201912081728_%E4%B8%8A%E6%B5%B7-%E9%BB%84%E6%B5%A6_7_0/tiny" alt="">
  </div>
</div>

演示地址

保持宽高比 padding-top

<div class="container">
  <img class="media" src="..." alt="...">
</div>

.container {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
}
 
.media {
  position: absolute;
  top: 0;
}

参考地址

object-fit: contain; 实现自适应显示

.img-contanier {
  height: 100%;
  width: 100%;
  object-fit: contain;
}

扩展阅读

• aspect-ratio