不加width和height时，浏览器按图片原始尺寸渲染，易导致溢出或布局抖动；应删除html属性，改用css的max-width:100%和height:auto实现响应式缩放。

img 标签不加 width 和 height 会怎样

直接写 <img src="a.jpg">，浏览器会按图片原始尺寸渲染，超出容器就溢出，缩放窗口时图片纹丝不动——这不是响应式，只是“没设限制”。

关键不是“去掉属性”，而是用 CSS 主动接管尺寸控制。原始宽高属性（width/height）会强制固定像素值，和媒体查询、视口变化完全脱节，必须弃用。

• 删掉所有 width 和 height HTML 属性（哪怕写成 width="100%" 也不行，它只相对父容器，不响应视口）
• 把尺寸逻辑全部交给 CSS，用相对单位或函数
• 注意：保留 alt，否则可访问性失效，SEO 也受损

max-width: 100% 是核心规则

这是实现图片随容器缩放的最小必要样式。它让图片宽度最多等于其父容器宽度，超出则自动等比缩小；小于则保持原尺寸，不拉伸。

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

为什么必须配 height: auto？因为只设 max-width 时，浏览器仍按原始高度渲染，导致比例错乱、留白或裁剪。加上 height: auto 才能维持宽高比。

HTML汇报生成器

🚀 不用写一行代码！把项目总结、工作汇报、研究报告、技术文档、提案、数据看板直接变精美HTML。12种主题 × 11种背景动效 × 9种鼠标特效 × 10种边框样式 × 实时调色器 × 毛玻璃卡片 × PDF导出，生成后还能自由调色，零门槛AI直出。触发词：项目总结、工作汇报、PPT、生成报告、做个总结、HTML文档、数据报告、流程文档、会议纪要、技术文档、研究报告、数据看板、提案、做个展示页、帮我做个汇报、文档生成。

下载

• 不要写 width: 100% 单独使用——它会强制撑满父容器，小图被拉伸变形
• max-width: 100% + height: auto 是黄金组合，兼容所有现代浏览器（包括 IE9+）
• 如果父容器本身是响应式的（比如 max-width: 800px 的 <div>），图片自然跟着一起缩<h3>需要真正“全宽铺满”时用 object-fit</h3> <p>当图片要填满一个固定宽高的容器（如轮播图、卡片封面），又不想变形，就得用 <code>object-fit。它类似背景图的 background-size，但作用于 <img> 内容本身。

  .hero-img {
    width: 100%;
    height: 400px;
    object-fit: cover; /* 裁剪居中显示 */
  }

  • object-fit: cover：等比缩放并裁剪，常用于封面图
  • object-fit: contain：等比缩放并完整显示，四周可能留白
  • 注意：object-fit 不改变图片文件体积，只影响渲染，且 IE 完全不支持（需 fallback 或用 <picture></picture>）
  • 必须显式设置容器的 width 和 height，否则 object-fit 无效

  srcset 和 sizes 让响应式更精准

  光靠 CSS 缩放解决不了带宽浪费：手机加载 4K 图再缩成 300px，纯属浪费流量和时间。这时得用 srcset 告诉浏览器“不同视口该选哪张图”。

  @@##@@

  • srcset 列出多个资源及其固有宽度（480w 表示该图原始宽为 480px）
  • sizes 描述在不同断点下，图片将占据视口宽度的多少（100vw = 全宽，33vw ≈ 三分之一屏宽）
  • 浏览器根据当前设备 DPR、视口宽度、sizes 规则，自动选最接近的源图下载
  • 务必保留 src 作为降级兜底（老浏览器或 JS 关闭时仍能显示）

  复杂点在于 sizes 的计算依赖真实布局结构——如果图片在 flex 容器里被压缩，或受 margin/padding 影响，sizes 值就得相应调整，否则选图会偏大。这点容易被忽略，调试时建议用 Chrome DevTools 的 Network 面板看实际加载了哪张图。