正确设置 object-fit（如 contain 或 cover）可避免图片拉伸或裁剪，但需配合 width 和 height 使用；srcset 和 sizes 让浏览器按设备选合适分辨率图源；background-image 更可控但无语义；资源加载失败或容器无尺寸是图片不显示的主因。
用 width 和 height 会裁剪？那是没设对 object-fit
直接写 width 和 height 很容易让图片被拉伸或只显示局部，尤其当原图比例和容器不一致时。浏览器默认行为是“拉满填满”，不是“等比缩放居中”。关键在加一行 object-fit: contain。
-
object-fit: contain→ 等比缩放，完整显示整张图，留白也认了 -
object-fit: cover→ 等比缩放，填满容器，但可能裁边（常用于头图） - 必须配合
width和height使用，否则object-fit不生效 - 旧版 IE 不支持
object-fit，如果要兼容，得用background-image替代
<img alt="html图片如何调大小并全显示出来的" > 标签里加 srcset 和 sizes 是为了啥
不是为了“调大小”，而是让浏览器自己选最合适的分辨率版本，避免在高清屏上加载小图模糊、在手机上下载桌面大图浪费流量。单纯靠 CSS 缩放 <img alt="html图片如何调大小并全显示出来的" >，图源还是原尺寸，只是像素被拉伸或压缩了。
-
srcset提供多个图源路径 + 宽度描述，比如"photo.jpg 800w, photo@2x.jpg 1600w" -
sizes告诉浏览器“在这个断点下，图片容器大概占多宽”，比如"(max-width: 768px) 100vw, 50vw" - 没有
sizes，浏览器只能按 100% 容器宽猜，容易选错分辨率 - 注意：所有
srcset中的图必须内容一致、比例一致，否则响应式切换时会跳变
用 background-image 控制大小更稳，但有硬限制
当需要精确控制缩放、裁剪、定位，或者图片只是装饰性元素时，background-image 比 <img alt="html图片如何调大小并全显示出来的" > 更可靠——它天然支持 background-size、background-position，也不受 HTML 流式布局挤压影响。
传媒公司模板(RTCMS)1.0
下载
传媒企业网站系统使用热腾CMS(RTCMS),根据网站板块定制的栏目，如果修改栏目，需要修改模板相应的标签。站点内容均可在后台网站基本设置中添加。全站可生成HTML，安装默认动态浏览。并可以独立设置SEO标题、关键字、描述信息。源码包中带有少量测试数据，安装时可选择演示安装或全新安装。如果全新安装，后台内容充实后，首页才能完全显示出来。（全新安装后可以删除演示数据用到的图片，目录在https://
-
background-size: contain或cover效果和object-fit一致 - 必须设
width和height（哪怕是auto），否则背景区域为 0，图看不见 - 无法被屏幕阅读器识别，不能加
alt文本，纯装饰图才推荐用 - 不能被右键保存，也不参与页面语义结构，SEO 友好度归零
遇到 404 或图片只显示左上角一小块？先查路径和尺寸单位
图片“调不大”或“不显示”，90% 不是 CSS 问题，而是资源根本没加载进来，或者容器本身没尺寸。
立即学习“前端免费学习笔记（深入）”；
- 检查浏览器开发者工具的 Network 面板，看图片请求是不是
404或403 -
<img alt="html图片如何调大小并全显示出来的" >标签没设width/height，又没父容器约束，它默认宽高为 0 - CSS 里写了
width: 100%，但父级div没设高度，结果 100% of 0 = 0 - 路径用了相对地址，但当前 HTML 文件位置和预期不符，比如从子目录打开时
./img/a.jpg就会失效
object-fit 也白搭。 
