在css grid中让图片保持16:9比例并自适应填满，核心做法是设置容器为grid布局，利用`aspect-ratio: 16/9`固定宽高比，并将图片设为`width: 100%; height: 100%; object-fit: cover;`。这样图片会始终填满网格单元，超出部分被裁剪，且比例严格锁定。
如何定义Grid容器与子项的填充行为
要让图片填满Grid单元格，需确保容器使用`display: grid`，子项（图片）占据整个可用空间。通过`grid-template-columns`和`grid-template-rows`定义列宽和行高，图片作为子项默认拉伸以填充单元格。结合`object-fit: cover`，图片按比例缩放并裁剪，不变形。
<meta charset="UTF-8"><title>Grid Image 16:9</title><style>
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.grid-item {
aspect-ratio: 16 / 9;
overflow: hidden;
}
.grid-item img {
width: 100%;
height: 100%;
object-fit: cover;
}
</style><div class="grid-container">
<div class="grid-item">
@@##@@
</div>
<div class="grid-item">
@@##@@
</div>
<div class="grid-item">
@@##@@
</div>
</div>
如何处理不同屏幕尺寸下的响应式调整
在不同屏幕尺寸下，Grid容器通过`repeat(3, 1fr)`自动分配列宽，图片随容器缩放。若需更灵活的控制，可使用媒体查询调整`grid-template-columns`，例如在小屏幕上改为单列。图片的`object-fit: cover`确保在任何尺寸下都保持16:9比例并填满。
<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Responsive Grid Image</title><style>
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 10px;
}
.grid-item {
aspect-ratio: 16 / 9;
overflow: hidden;
}
.grid-item img {
width: 100%;
height: 100%;
object-fit: cover;
}
</style><div class="grid-container">
<div class="grid-item">
@@##@@
</div>
<div class="grid-item">
@@##@@
</div>
<div class="grid-item">
@@##@@
</div>
</div>
当图片原始比例非16:9时如何强制适配
即使图片原始比例不是16:9，通过`aspect-ratio: 16/9`和`object-fit: cover`，图片仍会被裁剪并填满容器。例如，一张4:3的图片在16:9容器中会左右裁剪，保持高度一致。此方法适用于所有比例的图片，无需预处理。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
