CSS Grid 是一种强大的布局工具，可以帮助前端开发人员轻松地实现复杂布局。在实现自适应的图片布局时，使用 CSS Grid 可以轻松地控制图片尺寸和位置，从而实现完美的自适应布局。
实现思路
要实现自适应的图片布局，我们需要做两个重要的事情：
- 设置网格布局，用于控制图片的位置
- 通过 CSS 属性：
object-fit: cover使图片自适应父容器大小
网格布局
首先，我们需要设置网格布局。通过设置网格布局，我们可以定义一个具有固定行和列的网格，然后将图片放在不同的网格单元中。这样，我们就可以精确地控制图片的位置。
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 定义三列 */
grid-gap: 20px; /* 列之间的间隙 */
}上面的代码中，我们创建了一个具有三列的网格布局，每列的大小相等（1fr），并且每列之间有 20px 的间隙。
自适应图片尺寸和位置
要让图片自适应其父容器的大小，我们需要使用 object-fit: cover 属性。这个属性可以让图片在保持其纵横比的同时，填充其父容器。
.grid-item img {
width: 100%; /* 让图片占满父容器 */
height: 100%; /* 让图片占满父容器 */
object-fit: cover; /* 让图片自适应父容器 */
}上面的代码中，我们通过设定图片的 width 和 height 属性使图片占满其父容器。然后，我们使用 object-fit 属性来让图片自适应其父容器的大小。
示例代码
最后，我们来看一下完整的示例代码：
-- -------------------- ---- -------
---- -----------------------
---- ------------------
---- ----------------- -------
------
---- ------------------
---- ----------------- -------
------
---- ------------------
---- ----------------- -------
------
---- ------------------
---- ----------------- -------
------
---- ------------------
---- ----------------- -------
------
---- ------------------
---- ----------------- -------
------
-------- -------------------- ---- ------- --------------- - -------- ----- ---------------------- --------- ----- --------- ----- - ---------- - --------- --------- ------ ----- --------------- ----- -- --------------- -- - ---------- --- - --------- --------- ---- -- ----- -- ------ ----- ------- ----- ----------- ------ -- ---------- -- -
上面的代码中，每个 .grid-item 元素都具有相同的纵横比。这个纵横比由 padding-bottom 属性控制。然后，我们使用绝对定位将图片放在 .grid-item 元素的顶部和左侧，并使用 width 和 height 属性将其占满整个元素。最后，我们使用 object-fit 属性使图片自适应其父容器的大小。
总结
使用 CSS Grid 可以轻松实现自适应的图片布局。通过设置网格布局和使用 object-fit: cover 属性，我们可以精确地控制图片的位置和尺寸，从而实现完美的自适应布局。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64631a1b968c7c53b041e128