如何用CSS适配无明确宽高的容器中的图片？

先搞明白为啥object-fit不管用：它生效的前提是图片得有明确的宽高约束，要是容器是隐式宽高（比如靠内容撑开、没设固定width/height），图片大概率会按自身尺寸把容器撑起来，自然就没适配效果了。下面给几个实用的解决思路：

1. 给图片设满容器的宽高 #

直接给图片加width: 100%; height: 100%;，再配合object-fit就能让图片占满容器并适配：

/* 容器是隐式宽高，比如由父布局或内部其他元素撑开 */
.image-container {
  display: flex;
  /* 这里可以是其他布局，比如inline-block、grid等 */
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 按需选contain/fill/scale-down等 */
}

2. 改用容器背景图实现适配 #

如果图片不需要作为<img>标签存在，直接把它设为容器的背景，用背景属性控制适配：

.image-container {
  background-image: url('你的图片路径');
  background-size: cover; /* 或者contain，按需选择 */
  background-position: center;
  background-repeat: no-repeat;
  /* 容器的隐式宽高由其他内容维持 */
}

3. 用Grid布局强制尺寸上下文 #

用CSS Grid给容器建立尺寸约束，让图片能继承容器的隐式尺寸：

.image-container {
  display: grid;
}

.image-container img {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

内容的提问来源于stack exchange，提问作者osama B.