标签不控制缩放，真正起作用的是内部标签及其css样式；必须将width/height等样式写在上，而非容器上。
Picture 标签本身不直接缩放图片，它只负责“选图”；真正控制缩放的是内部的 <img> 标签及其 CSS 样式。很多人误以为 <picture></picture> 能缩放，结果加了 width/height 却没效果——问题出在样式没落到 <img> 上。
关键：样式必须写在 ![]()
上，不是
<picture></picture> 是语义化容器，浏览器渲染时最终显示的仍是其内部的 <img>。所以所有尺寸、缩放、裁剪等视觉控制，都得通过给 <img> 加 class 或内联 style 实现。
- ✅ 正确写法：
<img src="..." alt="..." class="responsive-img">，再用 CSS 控制 .responsive-img - ❌ 错误写法：
<picture class="responsive-img">...</picture>—— 这个 class 不影响图片显示大小 - 注意：
<source></source>标签不能加样式，它只提供资源路径和匹配条件
推荐缩放组合：max-width + height: auto
这是最安全、最常用的等比缩放方案，适配各种容器宽度，且不拉伸变形。
- 写法示例：
img.responsive-img { max-width: 100%; height: auto; } - 作用：图片宽度不超过父容器，高度按原始比例自动计算
- 适用场景：文章配图、响应式图文列表、移动端内容区
- 补充：若父容器本身用了 flex 或 grid 布局，该写法依然生效
需要裁剪+固定比例？用 object-fit 配合容器
当你要让不同尺寸的图片统一显示为 4:3 或 1:1，并自动居中裁剪（不拉伸），就得靠 object-fit：
- 给
<img>设定固定宽高（如width: 300px; height: 225px;），再加object-fit: cover; - 或配合容器实现响应式比例：
img.card-img { width: 100%; height: 0; padding-bottom: 75%; /* 4:3 */ }，再用 background-image + cover（此时需改用 div + background，不是 img） - 注意：
object-fit在 IE 中不支持，如需兼容可降级为 background-image 方案
放大交互（如 hover 放大）仍由 img 控制
哪怕你用 <picture></picture> 提供高清图源，悬停放大效果也得绑定在 <img> 上：
- CSS 示例：
img.zoomable:hover { transform: scale(1.05); transition: transform 0.2s ease; } - 如果用了
object-fit: cover，放大时会自然裁切边缘，视觉更干净 - 避免对
<picture></picture>设置 transform，否则可能触发重排异常或裁剪错位
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
