😋😋😋网格布局(grid)中的图片缩放-CSS
写在开头
哈喽，各位看官早上好呀。😀
人活着要有生活的目标，一辈子的目标，一段时间的目标，一个阶段的目标，一年的目标，一个月的目标，一个星期的目标，一天一小时一分钟的目标。
——（俄国）列夫·托尔斯泰
离过年已经过去一个多月了，都说人活着要有目标，新的一年小编也给自己定了各种各样的目标，足足十大项，每天忙得不亦乐乎，刷手机短视频时间也减少很多了耶😆，就是不知道到年底能完成几个Flag，尽力而为吧，加油❗
今天给各位大大分享的是一篇 CSS 技巧的文章，主要是网格布局(grid)与 var() 函数相结合应用方面的。
如果你觉得内容还不错，希望您能给小编点个赞呗，谢谢了。😁
九宫格
如上图，这是我们要实现的第一个效果，可能看着挺复杂的，实际我们仅需 HTML+CSS 就能完成啦。
在继续往下看之前，小编希望你对
grid布局有一定了解哦，不了解其实也没关系，小编标上详细注释，问题不大。😂
先来构建一个九宫格结构：
样式：
.box {
/* 定义一个格子大小 */
--size: 100px;
/* 定义格子之间的间隔 */
--gap: 10px;
display: grid;
/* 格子之间的间隔 */
gap: var(--gap);
/* 容器宽度=3个格子+2个间隔 */
width: calc(3 * var(--size) + 2 * var(--gap));
/* 保持格子的宽高比例 */
aspect-ratio: 1;
/* 生成三列 */
grid-template-columns: repeat(3, auto);
}
.box img {
width: 0;
height: 0;
min-height: 100%;
min-width: 100%;
object-fit: cover;
transition: 0.28s linear;
}
aspect-ratio: 1; 等同于 height: calc(3 * var(--size) + 2 * var(--gap));
grid-template-columns: repeat(3, auto); 等同于 grid-template-columns: auto auto auto;
为什么说要稍微了解一下 grid 布局，就是怕这两个属性有的小伙伴没接触过😄，可以上MDN瞧瞧哈，挺简单基础的东西了。
还有就是子元素图片的样式，这里的图片既没有宽度也没有高度，但是最小宽度和高度都为 100% ，这是一个非常巧妙的技巧，后面我们的图片缩放效果就是依赖这个样式实现。
上面我们仅通过
grid-template-columns: repeat(3, auto);属性就创造了一个九宫格，可能你会想，这个属性不是仅定义了列吗？行呢？浏览器怎么知道我们要创建多少行？这主要是我们并不需要显示的定义行的数量，
CSS Grid能够自动将子元素放置在隐式的行和列上。Em...这是
Grid的一个基础规则吧，学了你就懂了。😁
现在我们就拥有一个最简单的九宫格结构了，接下来我们来给它加上缩放的效果。
.box {
...
/* 定义缩放比例 */
--scale: 1.2;
...
}
.box img:hover{
width: calc(var(--size) * var(--scale));
height: calc(var(--size) * var(--scale));
}
没了，就这样😦，我们轻易完成了上面动图的效果，是不是非常简单。但在没有 CSS Grid 之前，要实现这么一个效果，可是要费不少劲来着。
当然，尽管这个过程看起来很简单，代码量也不多，但要深入理解其背后的原理，你需要对 CSS Grid 有足够的了解和基础知识。😗
任意数量
上面，我们成功构建了一个 3x3 的九宫格，但实际情况中，我们可能需要不同尺寸的网格布局，比如 3x4 或 4x4 等等，接下来我们就来解决这个问题。
.box {
...
/* 定义行数量 */
--row: 3;
/* 定义列数量 */
--column: 4;
display: grid;
gap: var(--gap);
/* 容器宽度=列数*格子大小 + 格子间隔 */
width: calc(var(--column) * var(--size) + (var(--column) - 1) * var(--gap));
/* 容器宽度=行数*格子大小 + 格子间隔 */
height: calc(var(--row) * var(--size) + (var(--row) - 1) * var(--gap));
/* 列数根据需求生成 */
grid-template-columns: repeat(var(--column), auto);
}
我们把 行 和 列 单独抽出来定义成变量，让容器的宽度和高度、列数的生成都通过这些变量来重新计算。
这样我们就能生成任意数量的网格了，对了，记得把子元素的图片补齐噢❗
不定宽高
既然都能任意数量的格子了，那么，格子的宽度与高度我们肯定也希望不是固定的，像上面例子都是 100px 的正方形，能不能搞个长方形呢？😐
当然可以，这不 so easy 的事嘛！
.box {
...
/* 定义格子宽度 */
--width: 150px;
/* 定义格子高度 */
--height: 120px;
display: grid;
gap: var(--gap);
/* 容器宽度=列数*格子大小 + 格子间隔 */
width: calc(var(--column) * var(--width) + (var(--column) - 1) * var(--gap));
/* 容器宽度=行数*格子大小 + 格子间隔 */
height: calc(var(--row) * var(--height) + (var(--row) - 1) * var(--gap));
grid-template-columns: repeat(var(--column), auto);
}
.box img:hover{
width: calc(var(--width) * var(--scale));
height: calc(var(--height) * var(--scale));
}
一样，我们被格子的宽度和高度单独定义成变量，替换原理的 --size 即可。
全屏
有时，我们希望做一个全屏的照片墙，这又要如何解决呢❓
要做一个全屏的照片墙，意味我们要把 .box 容器铺满一屏，而铺满一屏的容器宽度和高度我们可以直接使用 100vw 与 100vh 。
.box {
...
width: 100vw;
height: 100vh;
...
}
但是，这还没完，里面格子的宽度与高度呢？
最开始我们提过，容器宽度=3个格子+2个间隔，其实就是"容器宽度=格子总宽度+格子之间的总间隔"。
也就可以推断出如下：
100vw = var(--column) * var(--width) + (var(--column) - 1) * var(--gap)
100vh = var(--row) * var(--height) + (var(--row) - 1) * var(--gap)
再反推格子的宽度与高度，可以得到：
--width: (100vw - (var(--column) - 1) * var(--gap)) / var(--column)
--height: (100vh - (var(--row) - 1) * var(--gap)) / var(--row)
最后，把它们带入我们定义的样式变量即可：
.box {
...
/* 不需要太大的缩放，防止溢出屏幕外 */
--scale: 1;
--width: calc((100vw - (var(--column) - 1) * var(--gap)) / var(--column));
--height: calc((100vh - (var(--row) - 1) * var(--gap)) / var(--row));
display: grid;
gap: var(--gap);
width: 100vw;
height: 100vh;
...
/* 防止出行滚动条 */
box-sizing: border-box;
}
body {
padding: 0;
margin: 0;
display: grid;
place-content: center;
box-sizing: border-box;
}
由于我们是全屏铺满，注意要清一下 body 的默认样式，还有 :hover 的时候由于是全屏铺满，可能会导致出现滚动条，需要我们设置 box-sizing: border-box; 样式，并且适当的调整缩放比例（--scale），防止溢出屏幕外。
（效果图就不放了，质量太大，有点卡😅）
手风琴
最后，我们再来做一个手风琴的效果来结尾。
其实也比较简单了，我们仅需要调整相应的样式变量即可。
注意，间隔（--gap）是 0px 不是 0，或者你直接写死你想要的手风琴宽度与宽度也可以的。
至此，本篇文章就写完啦，撒花撒花。
希望本文对你有所帮助，如有任何疑问，期待你的留言哦。 老样子，点赞+评论=你会了，收藏=你精通了。