【CSS】图片自适应等比例缩放

要实现 图片自适应等比例缩放，核心思路是：
👉 固定一个维度（宽度或高度），另一个维度自动按比例缩放，保持图片原始宽高比。

---

🔹 方法一：CSS 控制（最常用）

<div class="container"><img src="example.jpg" alt="img" />
</div>

.container {width: 300px;   /* 父容器宽度固定，可以是百分比 */height: auto;   /* 高度自适应 */
}.container img {width: 100%;    /* 宽度占满父容器 */height: auto;   /* 高度自动等比例缩放 */
}

✅ width: 100%; height: auto; 就能保证图片按照原比例缩放。

---

🔹 方法二：max-width 约束

img {max-width: 100%;  /* 不超过父容器宽度 */height: auto;     /* 高度自动 */
}

✅ 常用于响应式布局，保证图片在不同屏幕下不会撑破容器。

---

🔹 方法三：object-fit（更灵活）

如果容器有固定宽高，但想让图片保持比例，可以用：

img {width: 100%;height: 100%;object-fit: contain; /* 保持比例，完整显示 *//* object-fit: cover;  保持比例，可能裁剪填满 */
}

区别：

• contain → 全图可见，可能留白。
• cover → 填满容器，可能被裁剪。

---

🔹 方法四：背景图实现

如果用背景图而不是 <img>：

.container {width: 300px;height: 200px;background: url(example.jpg) no-repeat center center;background-size: contain; /* 等比例完整显示 *//* background-size: cover; 填满，可能裁剪 */
}

---

🔹 方法五：JS 动态设置（不推荐，除非有特殊需求）

有时需要根据图片原始宽高比动态设置：

const img = new Image();
img.src = "example.jpg";img.onload = () => {const ratio = img.width / img.height;const container = document.querySelector(".container");container.style.height = container.offsetWidth / ratio + "px";
};

✅ 适用于复杂场景，比如需要动态计算布局。

---

🔹 总结

• 最推荐：width: 100%; height: auto; 或 max-width: 100%; → 响应式场景。
• 如果容器宽高固定 → object-fit: contain | cover。
• 背景图 → background-size: contain | cover。
• 特殊场景再用 JS 动态计算。