在HTML & CSS中，img标签固定宽度时，img和图片保持比例缩放

在html中，我希望img标签及其图片能自动调整大小，图片保持比例缩放，使得图片的宽度变为和img的宽度相同，img的高度变为图片缩放之后的高度，这个需求可以通过以下几种CSS方法实现：

方法1：使用 width: 100%; height: auto;（最常用）

img {
  width: 100%;      /* 宽度填满容器 */
  height: auto;     /* 高度自动按比例缩放 */
  display: block;   /* 避免图片底部产生间隙 */
}

方法2：使用 max-width: 100%;（防止图片拉伸过大）

img {
  max-width: 100%;  /* 最大宽度不超过容器，但可以小于 */
  height: auto;     /* 高度自动按比例缩放 */
  display: block;
}

这个方法的好处是：如果图片原始尺寸小于容器，图片不会被拉伸变大（保持原始尺寸）。

方法3：使用 object-fit: contain;（更精确控制）

img {
  width: 100%;
  height: 100%;     /* 或设置为固定高度 */
  object-fit: contain; /* 保持比例，完整显示图片 */
  object-position: center; /* 图片居中显示 */
}

object-fit: contain; 确保图片完全显示，可能会在容器中留下空白空间。

方法4：使用 aspect-ratio（现代浏览器）

img {
  width: 100%;
  aspect-ratio: attr(width) / attr(height); /* 保持原始宽高比 */
  object-fit: cover; /* 或 contain，根据需要选择 */
}

注意：attr() 在 aspect-ratio 中的支持还不完全。

完整示例

<style>
.image-container {
  width: 300px;      /* 容器宽度 */
  border: 1px solid #ccc;
}

.image-container img {
  width: 100%;       /* 宽度和容器相同 */
  height: auto;      /* 高度自动按比例计算 */
  display: block;
}
</style>

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

各种情况的建议

1. 响应式设计常用：

img {
  max-width: 100%;
  height: auto;
}

2. 作为背景填充效果：

img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 填充整个容器，可能裁剪部分图片 */
}

3. 确保不会拉伸变形：

img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}

最推荐使用的是第一种方法 ：width: 100%; height: auto;，这是最常见且兼容性最好的方式。