直接放图片会塌陷错位，因浏览器按原始尺寸渲染，导致grid/flex无法统一视觉高度；需容器设宽高或aspect-ratio、图片用width/height 100%+object-fit:cover+overflow:hidden来确保等比裁剪填满。
为什么直接放![]()
会塌陷、错位、留白不一致
因为浏览器默认按原始宽高渲染图片，不同尺寸的图在同一个容器里会各自“撑开”高度，Grid 或 Flex 无法自动统一视觉高度。常见错误是只设 width: 100% + height: auto，结果网格行高参差、间隙忽大忽小，甚至出现横向滚动条。
真正要的是“每张图在固定框内等比缩放并居中裁剪”，不是拉伸也不是留白 —— 这需要容器控制尺寸 + 图片主动适配。
- 容器必须显式设置
width和height（或通过aspect-ratio约束），否则object-fit: cover失效 -
img不能用height: auto配 Grid/Flex，得用height: 100%或固定值 - IE 不支持
object-fit，需 fallback 到绝对定位方案（position: absolute+top: 50%+left: 50%+transform: translate(-50%, -50%)）
Grid 布局下怎么让每张图都填满格子且不拉伸
关键不是调图片，而是管住容器和图片的协作关系。Grid 只排位置，裁剪靠 object-fit 和容器约束。
- 父容器设
display: grid+grid-template-columns: repeat(auto-fill, minmax(250px, 1fr))+gap: 8px - 每个
.photo-item设固定宽高或aspect-ratio: 4/3（现代浏览器），并加overflow: hidden -
.photo-item img必须写width: 100%+height: 100%+object-fit: cover+object-position: center - 避免给
img设max-width: 100%—— 它会干扰height: 100%的计算，尤其在 Flex/Grid 子项中
示例片段：
.photo-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 12px;
}
.photo-item {
aspect-ratio: 4/3;
overflow: hidden;
}
.photo-item img {
width: 100%;
height: 100%;
object-fit: cover;
}
Flex 布局做单行滚动照片墙时图片被压缩怎么办
Flex 默认会让子项“尽可能填满可用空间”，而图片不是文本，没设 flex-basis 就容易被强行拉宽或压扁。问题不在图片本身，而在 Flex 的分配逻辑。
- 父容器必须设
display: flex+overflow-x: auto+scroll-behavior: smooth - 每个图片外层包裹
div（如.photo-card），设flex: 0 0 auto—— 关键是flex-shrink: 0防压缩 -
img自身设width: 100%+height: 200px（或aspect-ratio）+object-fit: cover - 别漏掉
-webkit-overflow-scrolling: touch，iOS 滚动卡顿基本都因这个
随机排列照片时为什么 sort(() => Math.random() - 0.5) 不可靠
这种写法不是真随机，它会让中间位置的元素更大概率留在原位，统计上存在偏置。更重要的是：DOM 重排后，浏览器未必立即重绘，尤其在图片加载未完成时，视觉顺序可能和 JS 排序结果不一致。
- 用 Fisher-Yates 洗牌算法，确保每个排列概率均等
- 洗牌后必须触发强制重排：比如读取一次
offsetHeight，或对父容器执行element.style.transform = 'scale(1)' - 如果图片是懒加载，得等
load事件全部触发后再洗牌，否则空白占位符会被打乱
最容易被忽略的一点：洗牌后若用了 CSS 动画过渡（如 transition: transform 0.3s），要确保所有 img 元素已渲染出实际尺寸，否则动画起点错乱。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
