图片预览尺寸被撑破页面时，应优先用css的max-width:100%和height:auto保持比例；需统一缩略图尺寸时用object-fit:cover裁剪；为防布局抖动，须提供width/height或aspect-ratio。
图片预览尺寸被撑破页面怎么办
直接在 <img> 标签里加 width 和 height 属性，多数情况下就能压住尺寸——但注意，这是“固定像素值”，一旦图片原始宽高比和设定值不一致，就会拉伸变形。更稳妥的做法是用 CSS 控制最大尺寸并保持比例。
用 max-width 防止图片溢出容器
搜索结果页的图片容器宽度常不固定（比如响应式布局），硬写 width="200" 容易在小屏上横向滚动。推荐给所有预览图统一加类名，再用 CSS 约束：
@@##@@
对应 CSS：
.search-thumb {
max-width: 100%;
height: auto;
display: block;
}
-
max-width: 100%让图片宽度不超过父容器，小图不会被放大 -
height: auto保证宽高比不变，避免压缩或拉伸 -
display: block消除图片默认的基线对齐带来的底部空白
需要统一缩略图尺寸时慎用 object-fit
如果搜索结果要求所有图片都显示为 120×80 像素的方框（不管原图比例），不能只靠 width/height，否则会畸变。此时要用 object-fit：
@@##@@
-
object-fit: cover类似背景图的background-size: cover，裁剪居中显示 -
object-fit: contain会完整显示全图，留白；fill强制拉伸填满（不推荐） - 注意：IE 不支持
object-fit，如需兼容得用<picture></picture>或 JS fallback
搜索引擎结果页里图片没尺寸属性导致布局抖动
现代浏览器渲染图片时，若没提前告知宽高，加载后会重排版（layout shift），影响用户体验和 Core Web Vitals 分数。解决方法不是靠 JS 补尺寸，而是服务端或构建时注入 width/height：
- 静态生成工具（如 Jekyll、Hugo）可读取图片元数据自动写入属性
- 使用
<img src="photo.jpg" class="search-thumb">时尽量提供原始宽高：<img src="photo.jpg" style="max-width:90%"> - 若无法获知原始尺寸，至少设
aspect-ratio（CSS 属性，Chrome 88+ 支持）：style="aspect-ratio: 4/3; width: 100%;"
真正麻烦的是第三方图片链接（比如搜索结果抓取的外链图），连宽高都拿不到——这时候只能靠 CSS 占位容器 + object-fit 或 JS 动态探测，但后者有延迟和跨域限制。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
