如何实现单列CSS图片网格自适应容器且不截断不扭曲图片？

要在单列布局下让所有图片完整显示且不被截断，核心是调整图片的适配逻辑，让图片按原比例缩放适配网格单元格，而非强制填满单元格导致裁剪。

修改后的完整代码 #

.container {
  min-height: 500px;
  min-width: 300px;
  max-height: 500px;
  max-width: 300px;
  background: lightBlue;
  overflow: hidden;
}

.grid {
  display: grid;
  height: 100%; /* 让网格填满容器高度 */
  grid-template-columns: 1fr; /* 保持单列布局 */
  grid-template-rows: repeat(6, 1fr); /* 6行平分容器高度 */
  background: green;
}

img {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain; /* 强制图片完整显示，避免裁剪 */
  background: red;
}

<div class="container">  
  <div class="grid">
    <img src="https://cdn.pixabay.com/photo/2017/02/07/16/47/kingfisher-2046453_960_720.jpg" />
    <img src="https://cdn.pixabay.com/photo/2017/02/07/16/47/kingfisher-2046453_960_720.jpg" />
    <img src="https://cdn.pixabay.com/photo/2017/02/07/16/47/kingfisher-2046453_960_720.jpg" />
    <img src="https://cdn.pixabay.com/photo/2017/02/07/16/47/kingfisher-2046453_960_720.jpg" />
    
    <img src="https://cdn.pixabay.com/photo/2017/02/07/16/47/kingfisher-2046453_960_720.jpg" />
    <img src="https://cdn.pixabay.com/photo/2017/02/07/16/47/kingfisher-2046453_960_720.jpg" />
  </div>
</div>

关键调整说明 #

1. 网格高度适配：给.grid加height: 100%，确保网格完全填满容器的500px高度，6行通过repeat(6, 1fr)平分高度，每行高度约83px。
2. 图片适配逻辑：
   • 移除原代码的object-fit: cover（这个属性会强制图片拉伸/裁剪以填满单元格，导致比例不符时被截断）。
   • 改用object-fit: contain，强制图片按原比例缩小，完整显示在单元格范围内，不会超出或被裁剪。
   • max-height: 100%和max-width: 100%限制图片尺寸不超过单元格边界。

调整后，图片会自动适配每行的高度缩小，所有6张图片都能完整显示在300x500的容器中，效果和交换行列数时一致。

内容的提问来源于stack exchange，提问作者Rollie