CSS如何实现拉伸图片完全适配div class容器尺寸？

此前两种尝试方案的限制说明：

• background-size: cover 基于图片原始比例等比缩放以撑满容器，超出容器边界的图片区域会被直接裁切，天然无法满足图片完整显示的要求
• object-fit: fill 未达到预期效果的核心原因，是未同步为<img>标签设置占满容器的宽高，属性缺少生效的必要前置条件

背景图场景的实现 #

若将图片设置为div的背景图，直接使用宽高双100%的缩放规则，即可实现无裁切、完全撑满容器的效果：

.adapt-container {
  /* 明确指定容器的实际宽高，作为尺寸匹配的基准 */
  width: 100%;
  height: 300px; /* 替换为业务实际需要的容器高度值 */
  background-image: url("本地图片资源路径");
  /* 核心适配属性：强制拉伸匹配容器宽、高，无裁切、无留白 */
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center center;
}

注意：该设置会打破图片的原始宽高比，如果图片与容器的宽高差异过大，会出现一定程度的拉伸变形，这是“完全撑满+完整无裁切”需求下的固有取舍。 #

内嵌img标签场景的实现 #

若使用<img>标签将图片嵌入div容器，需要补全属性生效的前置条件，完整可运行代码如下：

<!-- 页面结构 -->
<div class="adapt-container">
  <img src="本地图片资源路径" alt="展示图片" class="adapt-image">
</div>

.adapt-container {
  /* 明确指定容器的实际宽高 */
  width: 100%;
  height: 300px; /* 替换为业务实际需要的容器高度值 */
  overflow: hidden;
}
.adapt-image {
  /* 必加前置属性：让img完全占满容器的宽、高范围 */
  width: 100%;
  height: 100%;
  /* 核心适配属性：强制拉伸填充容器，无裁切、无留白 */
  object-fit: fill;
  -o-object-fit: fill;
}

补充说明：如果不希望图片被拉伸变形，同时要保持图片完整不裁切，可以将object-fit: fill替换为object-fit: contain，但该模式下图片会按原始比例缩放至容器内的最大可容纳尺寸，若图片与容器比例不一致，会在容器内留下与图片比例匹配的留白，无法实现完全撑满容器的效果。 #

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