如何使用CSS实现矩形图片的响应式适配

object-fit属性生效的前提是<img>元素本身存在明确的宽高约束，原有样式里写的height: auto会让图片高度完全跟随原始文件的宽高比计算，没有固定的高度/宽高比边界，所以不管是object-cover还是object-contain都无法生效。原有样式仅能保证正方形图片不超出容器宽度，无法适配不同比例的矩形图。

根据你的版面需求二选一即可：

方案1：统一图片展示比例（匹配示例的卡片式效果） #

如果要实现示例里所有图片尺寸统一、随窗口宽度响应式适配的效果，给图片设定固定宽高比，再搭配object-fit规则：

.articleSection {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  /* 按你的版面需求调整最大宽度即可 */
  max-width: 750px;
  margin: 0 auto;
}

.articleSection img {
  width: 100%;
  /* 用aspect-ratio设定固定展示比例，比如常用的4:3、16:9都可以，替换数值即可 */
  aspect-ratio: 4 / 3;
  /* 图片铺满容器，超出部分自动裁切，不变形 */
  object-fit: cover;
  /* 裁切时优先保留图片中心区域的内容 */
  object-position: center;
}

如果不需要裁切图片，想要完整展示所有矩形图的内容，仅需把object-fit: cover替换为object-fit: contain即可，此时图片会等比缩放完整展示在固定比例的容器内，可按需给图片添加背景色填充留白区域。

方案2：保留图片原始比例，仅限制超高 #

如果不需要统一所有图片的展示尺寸，只是要避免竖长矩形图在大屏下过高影响排版，不需要修改原有响应式逻辑，仅补充最大高度约束即可：

.articleSection img {
  max-width: 100%;
  /* 限制图片最高不超过视口高度的70%，可根据需求调整数值 */
  max-height: 70vh;
  height: auto;
  width: auto;
}

• 方案1适配后，不管原始图片是正方形、横版矩形还是竖版矩形，都会按你设定的统一尺寸展示，宽度随容器自适应缩放，不会出现拉伸变形，和你给出的示例效果完全一致。
• 方案2会保留每张图片的原始宽高比，仅限制图片的最大宽度和最大高度，不会裁切图片内容，适合对图片展示完整性要求高的内容场景。

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