如何使用CSS实现图片在容器内等比填充且居中无裁切？

适配所有比例图片的实现方案 #

方案1：原生object-fit属性实现（兼容性好，代码最简） #

直接给图片添加如下样式即可，无需修改父容器布局：

img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

object-fit: contain会自动将图片等比缩放至完全容纳在父容器范围内，不会出现裁切或变形，object-position: center保证图片始终在容器内水平垂直居中。

方案2：flex布局实现 #

父容器设置flex布局属性，图片限制最大宽高即可：

/* 父容器样式 */
.parent-container {
  width: 你需要的父容器宽度;
  height: 你需要的父容器高度;
  display: flex;
  justify-content: center;
  align-items: center;
}
/* 子图片样式 */
.parent-container img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}

该方案通过flex布局的对齐属性实现居中，限制图片最大宽高不超出容器，自动适配图片原始比例。

方案3：grid布局实现 #

代码比flex方案更简洁：

/* 父容器样式 */
.parent-container {
  width: 你需要的父容器宽度;
  height: 你需要的父容器高度;
  display: grid;
  place-items: center;
}
/* 子图片样式 */
.parent-container img {
  max-width: 100%;
  max-height: 100%;
}

place-items: center是grid布局中实现子元素水平垂直居中的简写属性，逻辑和flex方案一致，适配所有比例的图片。

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