如何让图片在不同设备上保持比例并自适应容器大小？

例如：

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

width: 100% + height: auto 保持比例自适应

.img-container {
  width: 100%; /* 或者固定宽度，也可以用百分比 */
  max-width: 400px; /* 可选，最大宽度限制 */
}

.img-container img {
  width: 100%;
  height: auto; /* 保持原始比例 */
  display: block; /* 防止底部有空隙 */
}

原理：图片宽度会跟随容器变化，高度自动按比例缩放。

object-fit: cover / object-fit: contain 控制填充方式

.img-container {
  width: 100%;
  aspect-ratio: 16/9; /* 设定比例容器 */
  overflow: hidden;
}

.img-container img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 可选 contain/cover */
  display: block;
}

• cover：图片会填满容器，可能裁剪部分内容；
• contain：图片整体显示，可能有留白。