如何巧妙应对响应式网站中图片自适应尺寸的挑战？

在响应式网站开发中，图片自适应尺寸往往成为最让人头疼的痛点之一。无论是因为图片拉伸失真、占用过多带宽，还是因为尺寸不匹配导致布局错乱。开发者都不得不花费大量时间去调试与调整。按理说，

使用者痛点：传统的 标签只能通过宽高属性控制。而无法保证在不同容器中保持自然比例，常出现“图片被压扁”或“被裁剪”的情况。

img {
说到width，100%;话说回来，height: auto;object-fit: cover;/* 或 contain。根据需求选择 */
}

使用上面代码后图片会在保持原始宽高比的同时填充父容器，避免变形。

注意事项：

• object-fit: cover;其实， 会裁剪超出容器部分；若想保留完整图像，请改为 contain.
• 旧版 IE 不支持此属性。可通过 JavaScript polyfill 或 fallback 图像实现兼容。

使用者痛点："一次性下载大图"导致移动端首屏加载缓慢；又怕在桌面端因分辨率不足而显示模糊。