如何将较小的图片自动调整大小以适配更大的div且保持宽高比？

你现有代码中仅给img设置了max-width:100%和max-height:100%，仅能限制图片最大尺寸不超出父容器，无法让小于容器的图片主动放大填充分配区域，按需求可以选择以下两种实现方案：

方案1：使用object-fit属性（推荐） #

该属性为CSS3原生属性，主流浏览器均支持，可以直接控制img标签的缩放规则，完美保留图片宽高比：

1. 首先给图片的父容器设置对应尺寸，比如你要让图片铺满全屏的.bgimage容器，就给.navi添加宽高属性：

.navi {
  width: 100%;
  height: 100%;
}

2. 给目标图片添加样式，按需选择缩放规则：

• 若需要完整显示整张图片，不裁剪，超出容器的部分自动留空：

.AboutUsPic {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center; /* 图片居中显示 */
}

• 若需要完全填满容器，不留空白，图片超出容器的部分自动裁剪：

.AboutUsPic {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center; /* 图片居中裁剪 */
}

方案2：使用背景图实现（兼容老旧浏览器） #

如果需要兼容IE等不支持object-fit的老旧浏览器，可以将图片改为父容器的背景图实现相同效果：

1. 删掉HTML中原有的<img>标签，给.navi添加如下样式：

.navi {
  width: 100%;
  height: 100%;
  /* 替换为你的图片地址 */
  background-image: url("https://img.freepik.com/free-vector/gray-white-gradient-abstract-background_53876-60238.jpg?size=338&ext=jpg");
  background-repeat: no-repeat;
  background-position: center;
  /* 完整显示图片用contain，填满容器用cover，规则和上面object-fit一致 */
  background-size: contain;
}

两种方案都可以完美适配不同屏幕尺寸，不会出现图片拉伸变形的问题。

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