求助：图片无法填满容器高度，使用object-fit未解决问题

你的问题核心是容器没有设置明确的高度，导致图片的height:100%没有参照对象，所以object-fit无法生效。下面是具体的解决方案：

方案1：给容器设置固定高度 #

如果需要容器保持固定高度，直接给.container添加height属性即可：

.container {
  border-radius: 10px;
  overflow: hidden;
  width: 300px;
  height: 300px; /* 设置你需要的高度值 */
  background-color: red;
}

.container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

方案2：让容器继承父元素高度 #

如果容器高度需要跟随父元素，先确保父元素有明确高度，再给容器设置height:100%：

/* 以body为父元素的例子，先给根元素设置高度 */
html, body {
  height: 100%;
  margin: 0;
}

.container {
  border-radius: 10px;
  overflow: hidden;
  width: 300px;
  height: 100%; /* 继承父元素高度 */
  background-color: red;
}

.container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

方案3：用flex布局让容器自适应空间 #

如果需要容器在弹性布局中自动占满高度，给父容器设置display:flex即可：

.parent {
  display: flex;
  height: 400px; /* 父容器的高度 */
}

.container {
  border-radius: 10px;
  overflow: hidden;
  width: 300px;
  flex: 0 0 auto;
  background-color: red;
}

.container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

为什么之前的代码不生效？ #

当.container没有设置高度时，它的高度由内部图片的原始尺寸决定，图片会默认保持自身宽高比显示，此时height:100%对图片来说等于它的原始高度，自然看不出填充效果。只有给容器设置明确高度后，图片的height:100%才会以容器高度为参照，object-fit才能发挥裁剪或拉伸图片的作用。

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