css 响应式图片怎么设置

设置 CSS 响应式图片最核心的方法是设置 max-width: 100% 并保持 height: auto，这能确保图片宽度随父容器变化且不产生拉伸变形；若需进一步优化性能，应使用 srcset 属性提供不同尺寸的图片源。

max-width 和 height: auto 怎么用？

结论：这是实现图片宽度自适应的最基础且最通用的方法，能解决图片撑破容器的问题。

max-width: 100% 的核心作用是限制图片的最大宽度不超过其父容器的宽度，同时允许图片在容器宽度小于图片原始宽度时自动缩小；而 height: auto 则负责保持图片的原始长宽比，防止图片被拉伸变形。如果仅设置 width: 100%，图片会强制填满容器，导致高度也被拉伸，失去清晰度。

具体操作步骤：

1. 在 CSS 中针对所有 <img> 标签编写通用规则。
2. 设置 max-width: 100% 限制最大宽度。
3. 设置 height: auto 保持比例。

代码示例：

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

注意点： 此方法要求父容器必须设置宽度，否则图片将保持原始尺寸显示。

object-fit 怎么控制图片显示效果？

结论：使用 object-fit: contain 或 cover 可以在不拉伸图片的情况下控制图片在容器内的填充方式，配合固定高度使用效果最佳。

默认情况下，图片在容器内是按比例缩放的，但可能会因为高度不足而留白，或者因为高度溢出而破坏布局。object-fit 属性允许你指定图片如何填充其容器，其中 contain 会保证图片完整显示且不变形，但四周可能会有留白；cover 则会填满容器，多余部分会被裁剪，适合做封面图。

具体操作步骤：

1. 给图片设置一个固定的 height（例如 200px）。
2. 设置 width: 100% 让图片宽度占满容器。
3. 添加 object-fit: cover 或 object-fit: contain。

代码示例：

.responsive-img {
  width: 100%;
  height: 200px;
  object-fit: cover; /* 填满容器，裁剪多余部分 */
  background-color: #f0f0f0; /* 用于显示裁剪时的背景色 */
}

注意点： object-fit 属性在 IE11 及以下浏览器不支持，需配合 object-fit-polyfill 插件使用。

srcset 和 picture 标签怎么提升加载速度？

结论：使用 srcset 属性可以自动根据屏幕宽度加载不同尺寸的图片，从而显著提升页面加载速度和用户体验。

如果所有设备都加载同一张大尺寸图片，不仅浪费流量，还会导致移动端加载缓慢。srcset 属性允许你提供一组不同分辨率和尺寸的图片源，浏览器会根据屏幕像素密度（如 1x, 2x）和屏幕宽度自动选择最合适的图片加载。<picture> 标签则更进一步，允许你根据媒体查询条件或文件类型（如 WebP）提供不同的图片源。

具体操作步骤：

1. 准备多张不同尺寸的图片文件。
2. 在 <img> 标签中使用 srcset 列出图片及其宽度描述符。
3. 使用 sizes 属性告诉浏览器在不同屏幕宽度下图片的显示尺寸。

代码示例：

<picture>
  <source media="(max-width: 600px)" srcset="small.jpg">
  <source srcset="large.jpg">
  <img src="large.jpg" alt="示例图片">
</picture>

<!-- 或使用 srcset -->
<img src="small.jpg" 
     srcset="small.jpg 500w, medium.jpg 1000w" 
     sizes="(max-width: 600px) 500px, 1000px" 
     alt="示例图片">

注意点： sizes 属性的值必须与 srcset 中的宽度描述符匹配，否则浏览器可能无法正确选择图片。