响应式3*N图片网格布局求助：方形缩略图适配与断点调整

问题1：未知尺寸图片居中裁剪为300px×300px方形 #

通过容器限制+图片自适应裁剪解决：

• 给每个图片外层加容器，固定尺寸并隐藏溢出：

.image-container {
  width: 300px;
  height: 300px;
  overflow: hidden;
}

• 给图片设置铺满容器，启用居中裁剪：

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持比例裁剪填满容器 */
  object-position: center; /* 居中裁剪区域 */
}

无论图片是竖版还是横版，都会自动居中裁剪成300px的方形缩略图。

问题2：600px-900px区间切换为每行2张图片 #

用媒体查询调整网格列数即可实现：

若使用CSS Grid布局 #

• 默认设置每行3列：

.image-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem; /* 可选，设置图片间距 */
}

• 添加区间媒体查询，修改为2列：

@media (min-width: 600px) and (max-width: 900px) {
  .image-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

• 补充移动端（小于600px）规则，设置每行1列：

@media (max-width: 599px) {
  .image-grid {
    grid-template-columns: 1fr;
  }
}

若使用Flex布局 #

• 默认设置每行3张：

.image-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.image-container {
  flex: 1 1 calc(33.333% - 1rem);
}

• 添加区间媒体查询，改为每行2张：

@media (min-width: 600px) and (max-width: 900px) {
  .image-container {
    flex: 1 1 calc(50% - 1rem);
  }
}

• 补充移动端规则，设置每行1张：

@media (max-width: 599px) {
  .image-container {
    flex: 1 1 100%;
  }
}

额外注意事项 #

• 确保网格容器宽度设为100%，适配父容器宽度
• gap属性用于控制图片间距，可按需调整数值
• 若需兼容旧版浏览器，可将图片设为容器背景，用background-size: cover和background-position: center替代object-fit

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