img直接加width:100%在平板错位，因图片高度不一导致容器撑开呈阶梯状；应使用grid-auto-rows:1fr使父容器等高，并设img{height:100%;object-fit:cover}填满裁剪。
img 标签直接加 width:100% 为什么在平板上还是错位？
因为 img 默认是行内元素，且宽高比例不一致时，仅靠 width:100% 无法保证等高；平板（如 768px–1024px）常见多列布局（如 2 列 grid），若图片原始高度差异大，容器高度会随内容撑开，导致“阶梯式”错位。
关键不是让图片本身等高，而是让它们的**父容器高度一致**，再配合 object-fit 控制裁剪/缩放行为。
- 避免用
height: 200px这类固定值——不同设备像素密度和视口宽度变化后会拉伸失真 - 优先用 CSS Grid 或 Flex 实现容器对齐，而不是依赖 JS 计算高度
- 确保所有图片有明确的
aspect-ratio（现代浏览器支持）或通过 padding-bottom 技巧模拟
用 grid-template-rows: 1fr 实现真正等高容器
在平板断点内，给图片外层容器设为 display: grid，并用 grid-template-rows: 1fr 强制子项高度均分。注意：必须作用于直接父容器，且每个图片需包裹在独立子项中（如 <figure></figure> 或 <div>）。<pre class="brush:php;toolbar:false;">@media (min-width: 768px) and (max-width: 1024px) {
.gallery {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: 1fr; /* 关键：让每行子项高度一致 */
gap: 1rem;
}
.gallery-item img {
width: 100%;
height: 100%;
object-fit: cover; /* 裁剪居中，避免变形 */
}
}</pre>
<ul>
<li>
<code>grid-auto-rows 比 grid-template-rows 更适合动态数量的图片（不用预设行数）
img 设置 height: 100%，否则它不会填满网格单元格min-height: 150px 防抖兼容老浏览器时如何 fallback 到 padding-bottom 技巧？
部分旧版 Safari（iOS 14.5 之前）不支持 aspect-ratio，也无法可靠响应 grid-auto-rows: 1fr，此时需用 padding-bottom 百分比维持宽高比，再绝对定位图片填充。
.gallery-item {
position: relative;
width: 100%;
padding-bottom: 66.67%; /* 3:2 宽高比，按需调整 */
}
.gallery-item img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
- padding-bottom 百分比基于父容器宽度计算，所以能响应式保持比例
- 该技巧要求父容器有明确宽度（如
max-width: 50%在 2 列布局中） - 务必移除
img的默认 margin 和 vertical-align，否则可能引入额外间隙
object-fit: cover 和 contain 的实际取舍
在等高排列场景下，object-fit: cover 是首选，但要注意它会裁剪边缘；若业务要求完整展示图文（如证件照、图表），则必须用 contain，但此时会出现上下/左右留白，破坏“视觉等高”效果。
-
cover：适合封面图、产品图等强调构图的场景，需确保关键内容在图片中心区域 -
contain：适合 Logo、图标、数据图表，但要搭配background-color或padding填充留白，否则容器高度仍不一致 - 极少数情况可用
scale()+transform-origin手动缩放，但维护成本高，不推荐
实际项目中最容易被忽略的是：没有为图片设置明确的宽高属性（width/height HTML 属性），这会导致 SSR 或 LCP（最大内容绘制）阶段布局偏移。哪怕只是占位，也建议写上 <img style="max-width:90%" style="max-width:90%">，配合 CSS 的 aspect-ratio: attr(width) / attr(height) 更稳妥。
