图片轮播：强制每张图片填满整个div容器

这问题我熟！只用width: 100%确实不够，因为图片的固有宽高比会限制它撑满容器的高度。给你几个靠谱的方案，保证图片不管容器尺寸怎么变都能填满div：

这是CSS3新增的属性，专门用来控制图片这类替换元素在容器内的显示方式，完美适配你的需求。

/* 给你的div容器设置宽高（可以是任意值，比如百分比、固定像素） */
.image-container {
  width: 300px;
  height: 200px;
  overflow: hidden; /* 可选，防止图片超出容器范围 */
}

/* 强制图片填满容器 */
.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持图片宽高比，同时填满容器，超出部分自动裁剪 */
  /* 如果你完全不介意图片拉伸变形，换成 object-fit: fill; 即可 */
}

小提示：object-fit: cover是最常用的选项，既能保证图片不变形，又能填满容器；如果需要完整显示图片（哪怕容器有空白），可以用object-fit: contain，不过这不符合你“填满div”的需求。

如果你的场景允许把图片作为div的背景，这个方法也很方便：

.image-container {
  width: 300px;
  height: 200px;
  background-image: url('你的图片路径');
  background-size: cover; /* 保持比例填满容器 */
  background-position: center; /* 让图片居中显示，避免裁剪掉重要部分 */
  background-repeat: no-repeat;
}

这个方法的好处是不用额外的<img>标签，但如果需要图片的alt属性（满足无障碍访问需求），还是优先用方案一。

如果需要兼容不支持object-fit的旧浏览器，可以用绝对定位配合transform实现类似效果：

.image-container {
  position: relative;
  width: 300px;
  height: 200px;
  overflow: hidden;
}

.image-container img {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
}

原理是让图片的最小宽高至少覆盖容器，再通过transform把图片居中，超出容器的部分被overflow: hidden裁剪，效果和object-fit: cover几乎一致。

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