非你网

有这么一个场景。一堆宽高不一样的图片，按一定的宽高比放在一个容器里。并且，随着父容器宽度的变化，图片的宽高也随着变化。这里，主要用到 div 的一个属性 aspect-ratio。再结合媒体查询，就可以很容易做成自适应的展示。

https://developer.mozilla.org/zh-CN/docs/Web/CSS/aspect-ratio

https://github.com/vinistudy/autoImglist

部分示例代码

# img-con 使用 relative，方便 div 内部元素使用觉得定位，在图片上展示更多的信息
 .media-con {
    display: inline-block;
    box-sizing: border-box;
    padding: 0 8px;
    width: 33%;
 }

.media-con .img-con {
  width: 100%;
  height: auto;
  aspect-ratio: 3/2;
  overflow: hidden;
  position: relative;
}

.media-con .img-con .img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

可以根据外层容器的宽度不同，动态的设置 media-con 的百分比。比如，33%。超过 3 张自动换行。 20%，超过 5 张自动换行。数据合适就好。