响应式图片排版核心是控制容器行为而非图片自身：用容器包裹图片，通过aspect-ratio或padding-bottom锁定宽高比，再以object-fit控制填充方式；推荐语义化结构<figure>并保留width/height属性防CLS。
图片在不同屏幕宽度下被拉伸或裁剪变形
纯 CSS 实现响应式图片排版，核心不是让图片“自适应”，而是控制它的容器行为。浏览器默认把 <img> 当作内联替换元素，width: 100% 只对父容器生效，但若父容器没设宽高、或没处理 aspect ratio，图片就容易被压扁或撑破布局。
关键做法是：用容器包裹图片，并通过 aspect-ratio 或 padding-bottom 技法锁定宽高比，再让图片自身用 object-fit 控制内容填充方式。
-
aspect-ratio: 4 / 3是现代方案（Chrome 88+、Firefox 89+、Safari 15.4+），简洁可靠；老浏览器需 fallback 到 padding-bottom + absolute 定位 -
object-fit: cover会裁剪图片以填满容器，适合封面图；object-fit: contain保持完整但可能留白，适合图标或产品图 - 别给
<img>直接设固定height，否则响应式失效；所有尺寸控制应集中在容器上
HTML 结构写成 <div><img></div> 就够了吗
够，但得加 class 控制语义和行为。一个无意义的 div 包裹反而增加冗余。推荐结构带明确用途标识：
<figure class="responsive-img"> <img src="photo.jpg" alt="描述文字" width="800" height="600"> </figure>
其中 width 和 height 属性仍要保留——不是为了样式，而是告诉浏览器原始宽高比，辅助浏览器计算 intrinsic size，避免 CLS（布局偏移）。
立即学习“前端免费学习笔记（深入）”；
- 用
<figure>而非<div>更语义化，也方便后续加 caption - class 名如
responsive-img应反映用途（如responsive-img--cover表示裁剪模式），而非单纯“响应式”这种泛称 - 不推荐用
srcset+sizes替代 CSS 响应式——那是解决「不同分辨率下加载合适尺寸图片」的问题，和「同一张图如何在不同容器中正确显示」是两件事
如何让多张图片等宽等高网格排列且不溢出容器
Grid 是目前最干净的解法，无需 JS、不依赖 float 或 inline-block 的间隙问题。重点在于设置 grid 容器的 grid-template-columns 和子项的最小尺寸约束。
.img-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1rem;
}
.img-grid > figure {
margin: 0;
aspect-ratio: 4 / 3;
}
.img-grid > figure > img {
width: 100%;
height: 100%;
object-fit: cover;
}-
minmax(280px, 1fr)确保单列最小 280px，但能弹性伸展占满剩余空间；auto-fill比auto-fit更稳妥，避免空列塌陷 - 必须给
figure设aspect-ratio，否则img的height: 100%会失效（父高度未定义） - 移动端小屏下若出现横向滚动，大概率是父容器没设
overflow-x: hidden或某处用了固定width: 1200px类的硬编码值
Safari 15.3 及更早版本不支持 aspect-ratio 怎么办
用 padding-bottom + absolute 定位模拟，本质是利用 padding 百分比基于父容器宽度计算的特性来“撑开”高度。
.responsive-img::before {
content: "";
display: block;
padding-bottom: 75%; /* 4:3 → 3/4 = 0.75 */
}
.responsive-img > img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}注意这个方案要求父容器 position: relative，且不能设 height，否则 padding-bottom 失效。
- padding-bottom 值 = 高度 ÷ 宽度 × 100%，例如 16:9 →
56.25%，1:1 →100% - 务必检查是否意外触发了 BFC（比如给父容器加了
overflow: hidden），这会导致绝对定位子元素相对于该容器定位失败 - 这个技巧在伪元素里实现，可避免额外 DOM 节点，但调试时要注意伪元素是否被其他样式（如
display: none）意外隐藏
实际项目中最容易被忽略的，是图片原始宽高属性缺失导致的布局抖动，以及在 Grid 中忘记给子项容器设 aspect-ratio 就直接对 img 写 height: 100% ——后者在多数情况下根本不起作用。
