如何将不同尺寸图片适配固定大小的div容器？

下面是几种能让不同尺寸图片适配固定大小div容器的常用方法，按需选择：

方法一：使用object-fit属性（推荐） #

这是最直观的解决方案，通过CSS的object-fit控制图片在容器内的展示方式，同时保持图片比例。

HTML结构 #

<div class="image-container">
  <img src="your-image-path.jpg" alt="图片描述">
</div>

CSS样式 #

/* 固定容器尺寸 */
.image-container {
  width: 300px;
  height: 200px;
  border: 1px solid #eee;
  overflow: hidden; /* 隐藏超出容器的图片部分 */
}

/* 图片适配规则 */
.image-container img {
  width: 100%;
  height: 100%;
  /* 根据需求选择以下值 */
  object-fit: cover; /* 保持比例填满容器，超出部分裁剪（常用） */
  /* object-fit: contain; 保持比例完整显示图片，容器留空白 */
  /* object-fit: fill; 拉伸图片填满容器，会破坏比例（不推荐） */
}

方法二：背景图实现 #

如果不需要使用<img>标签，可将图片设为div的背景，同样能实现适配效果。

HTML结构 #

<div class="image-container" style="background-image: url('your-image-path.jpg')"></div>

CSS样式 #

.image-container {
  width: 300px;
  height: 200px;
  border: 1px solid #eee;
  background-size: cover; /* 对应object-fit:cover的效果 */
  background-position: center; /* 让图片居中显示 */
  background-repeat: no-repeat;
  /* 若需要完整显示图片，替换为 background-size: contain; */
}

方法三：限制图片最大宽高 #

如果希望图片完整显示且不超出容器，可通过max-width和max-height实现，但容器可能会出现空白区域。

CSS样式 #

.image-container {
  width: 300px;
  height: 200px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center; /* 让图片在容器内居中 */
}

.image-container img {
  max-width: 100%;
  max-height: 100%;
  display: block; /* 消除图片底部默认间隙 */
}

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