最直接有效的方式是设置 img { width: 100%; height: auto; display: block; }；固定尺寸容器用 object-fit: cover/contain；装饰性图片推荐背景图；全屏场景结合 vw 或 % 单位。
让图片显示时占满父元素宽度，最直接有效的方式是给 <img> 标签设置 width: 100%，并确保父容器有明确的宽度（通常默认就有），同时添加 height: auto 保持比例不变形。
基础写法：width: 100% + height: auto
这是最常用、兼容性最好的方案，适用于内容类图片（如文章配图、产品图）：
- 父容器无需特别设置宽度，块级元素天然占满可用宽度
-
img { width: 100%; height: auto; }—— 图片等比缩放，宽度撑满，高度自适应 - 建议加
display: block;避免底部默认留白（由行内元素基线引起）
需要填满固定尺寸容器？用 object-fit
当父容器设置了明确宽高（比如 width: 300px; height: 200px;），且你希望图片完全覆盖不留白或不拉伸，就该用 object-fit：
- 先设
img { width: 100%; height: 100%; } - 再加
object-fit: cover;—— 等比缩放并裁剪，确保填满（类似背景图的background-size: cover） - 若需完整显示不裁剪，改用
object-fit: contain;（可能上下或左右留白） - 注意：父容器最好加
overflow: hidden;防止裁剪部分溢出
不想用 img 标签？试试 CSS 背景图
如果图片只是装饰性用途（如横幅、封面），用背景图更灵活、控制更强：
- 把图片设为容器的
background-image - 搭配
background-size: cover;和background-position: center; - 确保容器本身有宽高，例如：
height: 400px;或min-height: 100vh; - 优势：无语义干扰、定位缩放精准、Safari 等浏览器表现稳定
响应式全屏场景：配合视口单位
若目标是让图片占满整个屏幕宽度（比如首屏大图），可结合视口单位增强控制：
- 容器设
width: 100vw;（严格等于屏幕宽度，含滚动条区域）或width: 100%;（更稳妥） - 图片仍用
width: 100%; height: auto;或object-fit: cover; - 避免用
min-width: 100%;—— 容易因 padding/border 导致水平溢出，引发滚动条
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
