如何让图片完全适配div#image-container？宽度正常但高度无法适配

嘿，我来帮你搞定这个图片适配容器的问题！你现在遇到的是宽度能适配但高度跟不上的情况，大概率是图片的原生宽高比和你的div#image-container不一致导致的，下面给你几个实用的解决方案，按需选择就行：

1. 用object-fit属性（最推荐！） #

这个CSS属性专门用来控制图片这类替换元素在容器内的展示方式，既能保留图片比例，又能完美适配容器宽高。给你的图片加上以下样式：

#image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 可选值还有contain/fill，看需求选 */
}

对属性值的说明：

• object-fit: cover：图片会等比例缩放，完全填满容器，超出容器的部分会被裁剪，保证容器没有留白，适合需要铺满容器的场景。
• object-fit: contain：图片会等比例缩放，完整显示在容器内，若宽高比不一致，容器会出现留白，适合需要完整展示图片的场景。
• object-fit: fill：强制图片拉伸填满容器，会破坏图片比例，除非容器和图片宽高比完全一致，否则不推荐。

⚠️ 注意：一定要给div#image-container设置明确的高度（比如height: 400px、height: 100vh或者通过flex/grid布局赋予高度），不然容器高度会跟着图片自适应，就谈不上高度适配了。

2. 将图片设为容器的背景图 #

如果不需要用<img>标签展示图片，也可以把图片作为容器的背景，这样适配起来更简单：

#image-container {
  width: 你的目标宽度;
  height: 你的目标高度;
  background-image: url('你的图片路径');
  background-size: cover; /* 同样可选contain/100% 100% */
  background-position: center; /* 让图片居中显示 */
  background-repeat: no-repeat;
}

这种方法适合把图片作为背景展示的场景，不需要额外处理<img>标签的样式。

3. 强制拉伸（不推荐，会变形） #

如果完全不在乎图片比例，只要求填满容器，可以直接用这个粗暴的方法：

#image-container img {
  width: 100%;
  height: 100%;
}

但这样会让图片按照容器的宽高比强制拉伸，大概率会出现变形，除非你的图片和容器原生宽高比完全一致，否则不建议使用。

内容的提问来源于stack exchange，提问作者ADH - THE TECHIE GUY