【CSS】---- 根据【张鑫旭-高宽不等图片固定比例布局的三重进化】的思考

前言

今天突然看到了张鑫旭大佬2023年写的《CSS高宽不等图片固定比例布局的三重进化》，从最开始的百分比padding到flex和aspect-ratio配合，最后使用container-type: inline-size和cqw配合实现，发现遇到相同的情况和我们现在实现的不同，于是就自己实现了一下。

效果

1. 基础的HTML结构

复制代码

<div class="box">
  <img src="http://image.zhangxinxu.com/image/study/s/hanyun.jpg"/>
  <img src="http://image.zhangxinxu.com/image/study/s/s512/mm1.jpg"/>
  <img src="http://image.zhangxinxu.com/image/study/s/s512/mm5.jpg"/>
  <img src="http://image.zhangxinxu.com/image/study/s/s512/mm2.jpg"/>
  <img src="http://image.zhangxinxu.com/image/study/s/s512/mm3.jpg"/>
  <img src="http://image.zhangxinxu.com/image/study/s/s512/mm4.jpg"/>
</div>

2. 使用flex实现

2.1 实现代码

复制代码

.box{
  width: 400px;
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.box img{
  width: calc(25% - 1.5rem / 4);
  aspect-ratio: 1;
  object-fit: cover;
}

可以看到在 img 的宽度时，还是需要通过 calc 函数进行计算，这里的1.5rem其实就是 gap 是 0.5rem，四张图片之间存在三个空隙，所以总宽度就是 0.5rem * 3 = 1.5rem；然后这个空隙需要四张图片来平分，所以除以 4，计算出最后宽度，高度没有进行计算，直接使用的是 aspect-ratio。
当然这里你也可以使用 container-type: inline-size和cqw 实现，只是需要将 % 换成 cqw。

.box{
width: 400px;
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
container-type: inline-size;
}
.box img{
width: calc(25cqw - 1.5rem / 4);
aspect-ratio: 1;
object-fit: cover;
}
可以到这些方法都是需要进行计算的，感觉比较麻烦，如何进行不计算，就能实现呢？我想到了 grid。

2.2 查看效果

flex 实现效果

3. 使用 grid 实现

3.1 实现代码

复制代码

.box{
  width: 400px;
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(4, 1fr);
}
.box img{
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

3.2 查看效果

grid 实现效果

4. 总结

通过 CSS高宽不等图片固定比例布局的三重进化，可以看到从最开始的浮动布局使用padding，到最后的 cqw，使用的CSS代码是越来越少，实现相同的效果。
现在我们实现使用 grid 布局后，连原来计算图片的宽度都省掉，发现CSS让我们越来越方便；
CSS 的进化让我想起前两天看到的一个属性，以前的瀑布流布局，需要在每天加一个元素，计算高度，但是现在直接两行CSS就能解决，不用再使用那么多JS去获取、计算、比较，可见CSS都是让我们的开发越来越简单，代码越来越简洁的。