企业官网建设流程全解析

图片显示这个事，看着简单，实际上一做页面就会炸出各种妖蛾子：横图被拉成竖图、高清大图把布局顶飞、小图被放大糊成一坨……我这两年给企业站、电商后台、甚至只写了个静态展示页的项目里都调过这类“显示图片”的问题，踩过的坑、试过的方案攒了一堆。这篇就把“html 如何完美的显示图片，不拉伸图片，完整显示”这件事彻底讲透，从底层原因到实战配置，给出一套可以直接抄作业的做法。

这套内容适合刚写页面不久的新手，也适合经常被产品经理拿“这图怎么变形了”来问的进阶玩家。核心会落在object-fit、background-size、响应式图片这几个主力方案上，再带一些真实项目里常用的容器适配技巧。你看完以后，遇到“图片显示”相关需求，至少能有底气说出：这里应该用 contain 而不是 cover。

1. 图片为什么会变形：先弄明白拉伸发生的底层逻辑

在动手写代码之前，我强烈建议你先理解一件事：<img>标签本身就是一个“会被拉伸”的元素。很多初学者以为图片变形是因为图片文件坏了，或者浏览器有 bug，其实大多数情况下，是我们用 CSS 给它设了宽高，而浏览器默认会把它“硬塞”进这个尺寸里。

1.1 同时固定宽高，比例就被浏览器强行改了

如果你写过这样的代码：

<img src="example.jpg" style="width: 300px; height: 200px;">

而example.jpg本身是一张 600x900 的竖图，那浏览器怎么处理？它不会自动把图片裁剪成 300x200，也不会自动等比缩放，而是直接把图片拉成 300 宽、200 高，画面里的内容全部被“压扁”了。这就好比你把一张竖版照片硬塞进一个横向相框，照片边缘虽然卡进去了，但里面的人脸全被压变形。

这背后的原因在于：<img>是替换元素，HTML 规范里默认的object-fit值等于fill，也就是“填满整个内容框，不保持比例”。你设了width和height，它就老老实实把图片塞满这两个尺寸，至于比例对不对，它不管。

1.2 父容器尺寸改变时，隐藏的“二次拉伸”

比直接写固定宽高更隐蔽的坑，藏在父容器里。比如你用 Flex 布局，父盒子设了display: flex，图片作为子项，常常会莫名被拉成一个很不协调的尺寸。原因是 Flex 布局默认的align-items是stretch，子项会被拉伸到与交叉轴方向上的容器高度一致。

举个真实场景：页面上有个轮播图，外层是display: flex的容器，里面的图片高度本来应该跟着宽度自动走，但由于 Flex 的对齐方式，图片被拉得老高。这类问题在 Flex 布局里非常常见，而且肉眼不易察觉，因为页面看起来“好像还能接受”，但图片里的文字和人物脸已经变形很严重了。

类似的坑还有：父容器设了固定height，子图片设了width: 100%，高度却没设，这时图片可能直接超出了容器底部，或者被容器裁剪。理解了“浏览器默认就会拉伸”这一点，你再看后面的解决方案，会顺很多。

2. 核心武器 object-fit：支撑起现代网页图片适配的半边天

聊到“不拉伸、完整显示”这两个关键词，object-fit基本是第一选择。这个属性从 2015 年左右开始被主流浏览器支持，到今天已经有非常高的兼容性，我自己写的页面里几乎都会用到它。它的作用就是规定<img>或<video>这类替换元素的内容，应该如何适应盒子本身的大小。

2.1 object-fit 五个取值，到底选哪个

object-fit一共五个值，每个我都给你拆开讲，结合真实场景。

第一个是fill，这是默认值。它会让内容填满整个盒子，不保持比例，所以图片变形是“天经地义”的。除非你明确知道图片比例和盒子比例完全一样，否则不建议用这个值。

第二个是contain，翻译过来就是“包含”。图片会保持自己的宽高比，缩放到能够完整放在盒子内部的最大尺寸。也就是说，图片长边的长度会贴着盒子的边，短边那边可能留白。这个值解决的就是“完整显示”这个核心诉求，商品图、证件照、需要完整看到全貌的图片场景，都可以优先考虑它。

第三个是cover，意为“覆盖”。图片保持宽高比，同时填满整个盒子，超出的部分会被裁剪掉。这是“铺满且不变形”的常用解，但代价是图片的边角可能被裁掉。做轮播图背景、头像、封面图的时候，cover 往往比 contain 更合适，因为视觉上更有冲击力、不留白。

第四个是none，表示按图片原始尺寸显示，不做任何缩放。如果图片比盒子大，就会溢出；如果比盒子小，就只显示一部分或者留白。这个值我平时用得不多，但有一种场景很合适：当你不希望浏览器对图片做任何缩放处理，比如展示像素级精度的设计稿时，可以用它。

第五个是scale-down，它是none和contain的结合体，最终显示结果取两者中较小的一版。我用它处理过一些特殊需求，比如图片原始尺寸很小，不希望被放大变糊，但又能保证不超出容器。它的计算方式是：先按 contain 算一遍，再按 none 算一遍，哪个尺寸小用哪个。

为了让你更直观地选型，我把这五个值的差异和典型应用场景整理成了一个表：

2.2 配套使用 object-position：控制图片的显示焦点

光有object-fit还不够，因为当图片被 contain 缩放后，那些留白的位置默认在正中间；当图片被 cover 裁剪时，默认保留的是正中间的 50% 区域。这在很多需求里都不合适，比如一张产品照关键信息在左上角，如果用 cover，可能刚好把左上角裁掉。

这时候就要用object-position来指定图片内容的对齐位置了。它和background-position的用法类似，可以传关键字（left、right、top、bottom、center），也可以传百分比、像素值。我经常这样写：

.img-cover { width: 400px; height: 300px; object-fit: cover; object-position: 50% 20%; }

这段代码的意思是：图片保持比例填满 400x300 的盒子，超出部分裁掉，但始终把图片垂直 20%（也就是偏上方）的位置作为显示重心。如果图片里是一个人脸特写，人脸刚好在上半部分，这个配置就会优先保留人脸而不是裁掉头顶。

object-position配合cover，几乎是电商头像、直播封面这类“人物主体不能裁没”场景的标准解法。我做过一个主播列表页，每个卡片都是 1:1 见方的头像框，主播的封面图五花八门，有的横构图、有的竖构图，还有的全景大图。后来统一用object-fit: cover加object-position: center 25%，效果非常稳定，人物脸基本都能露出来。

2.3 老浏览器兼容问题：object-fit 填不了坑时的保底方案

虽然object-fit兼容性已经很好，但在一些政务网站、老版本办公系统里，还可能碰到完全不支持 object-fit 的浏览器（比如某些定制版 Chrome 内核）。这时候有两个保底办法。

第一个是使用background-image替代<img>标签。因为background-size的兼容历史比object-fit长得多，老环境里也更稳。第二个办法是用padding-top百分比撑高度的经典技巧：通过给容器设一个按比例计算出的padding-top，然后把图片绝对定位在容器内，再用object-fit或background处理。这种方法在响应式场景下尤其好用，因为padding-top的百分比是相对父元素宽度计算的。

不过如果你不是必须兼容远古浏览器，我建议直接使用object-fit，简洁高效，少些花哨技术债，维护起来也舒服。

3. “完整显示”不等于“铺满”：很多人把这两个概念搞混了

标题里写着“完整显示”，可真到了产品经理嘴里，这句话可能有两个截然不同的意思。一种是“我要在盒子里看到图片的全部内容，一点都不能裁”；另一种是“我要图片铺满整个区域，但不能变形”。这两者诉求不一样，对应的方案也完全不同。

3.1 contain 和 cover 的语义差异，决定了业务表达

拿我做过的一个案例举例。一套后台管理系统的商品列表，每个商品都有一个缩略图位置，尺寸固定为 200x150。客户的需求原话是“图片要完整显示，不能变形”。这时候如果用cover，图片虽然不会变形，但一张长方形的商品包装图，上下会被裁掉一块，包装上的产品名可能看不全。用户嘴上说“不能变形”，实则是“要把包装和产品名全看到”，那答案就必须是contain。

而另一个需求是首页的主视觉轮播，产品说“图片要铺满整个板块，不能变形”。这种场景如果也用contain，左右两侧就会出现大黑边，视觉上非常脏。这时候应该用cover，虽然会裁掉一些边缘内容，但在铺满和不变形之间取得了最佳平衡。

所以下次你接到“完整显示”的需求，务必先追问一句：是“不能裁剪”还是“不能拉伸”？这两个目标分别对应 contain 和 cover，选反了，前端做得再好，产品也会挑刺。

3.2 用 contain 做出“框内完整展示”的标准模板

如果你确认了是“完整显示，一点不能裁”，直接套这个模板就行：

<div class="image-wrapper"> <img src="product.jpg" alt="商品图"> </div>

.image-wrapper { width: 200px; height: 150px; background-color: #f5f5f5; display: flex; align-items: center; justify-content: center; } .image-wrapper img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }

这里我把max-width: 100%和max-height: 100%写在图片本身上，目的在于让图片最大只能撑满容器，再配合object-fit: contain，它会自动保持比例缩放，短边留白。你可以把外层看成一个相框，图片在这个相框里等比缩放摆放。另外我建议给容器加一个浅色背景，这样留白区域不会显得突兀，整体视觉更好看。

还有一种更现代的写法是直接用aspect-ratio锁定比例，不用手动写宽高。比如：

.image-wrapper { aspect-ratio: 4 / 3; }

aspect-ratio会基于容器宽度自动计算高度，省去了响应式布局里大量手算高度的麻烦。这个属性目前兼容性也很成熟，我现在的项目基本都会用。

4. 容器适配与居中：比“显示图片”更进一步的三件套

很多时候，“完美显示图片”不只是把图片本身放对，还牵扯到它和周围元素的关系。我见过太多页面，图片单独看没问题，但放进布局里后，周围元素被顶得乱七八糟。下面这套组合技巧，可以应对大多数容器适配问题。

4.1 max-width 与 height: auto 组合，防止图片顶爆布局

在响应式布局里，最常见的问题是图片太宽，把外层容器撑爆。我最早踩这个坑是在做一个新闻列表页的时候，编辑上传的插图宽度大小不一，有的 1920，有的 800，直接用width: 100%显示，竖图也被强行拉成通栏宽，比例完全崩了。

正确的做法是给图片设一个上限，同时让高度自动播放：

img { max-width: 100%; height: auto; }

这段代码的意思是：图片宽度最多占到父容器的 100%，超过就自动等比缩小，高度根据比例自动计算。如果图片原始宽度小于容器，它也不会被放大。这套写法的好处是天然适配所有屏幕尺寸，不用关心父容器具体多宽，交给浏览器自己去算。

我个人的习惯是把它作为全局样式写进 reset 里，或者至少给所有内容区图片统一加上。这样做以后，基本不会再出现图片把布局撑破的问题，后续也不用为了某张特殊图片单独调样式。

4.2 让图片在容器里水平垂直居中，不再“偏居一隅”

解决了基本的撑破问题，紧接着就会遇到“图片在容器里位置不对”的问题。比如商品列表里，每张图片尺寸不一致，如果不做处理，它们会靠左上角对齐，视觉高低错落，很难看。

推荐的居中方案是 Flex 布局：父容器设置display: flex、align-items: center、justify-content: center，图片就会自动水平垂直居中。也可以用 Grid 布局，容器设置display: grid; place-items: center;，效果一样，代码更短。

如果你做的是邮件 HTML、或者一些不支持 Flex 的老环境，可以用text-align: center做水平居中，再配合line-height做垂直居中的旁门左道，但这里是不得已的做法，现代网页建议直接上 Flex 或 Grid。

居中处理完以后，还要考虑一个问题：图片在 Flex 容器里会不会被拉伸？这就回到第一章说的，Flex 默认的align-items: stretch会把子项拉伸。所以用 Flex 的时候，记得要么显式写align-items: center，要么给图片设object-fit: contain，二者取其一就行。

4.3 使用 aspect-ratio 给图片预留空间，避免布局抖动

有一类很影响用户体验的问题叫“布局位移”，简单说就是页面加载过程中图片还没加载完，等它加载出来以后，页面上所有元素突然往下跳了一下。原因是图片初始高度为 0，加载完成瞬间高度变成图片实际高度，下面的内容全被顶下去了。

解决方案有两种。第一种是用aspect-ratio给图片容器预设一个宽高比，这样浏览器一开始就知道图片占多大位置：

.card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

第二种是给图片容器设一个固定高度，比如height: 200px，配合object-fit: cover。这种做法的缺点是当屏幕宽度变化时，高度始终不变，可能会出现不必要的裁剪。相比之下，aspect-ratio更灵活。如果你想让图片按比例占据空间，同时又有“不裁剪”的需求，也可以把object-fit配成contain，但要注意这会带来留白。

5. 响应式图片：不同屏幕尺寸下，既清晰又不变形的正确姿势

前几章讨论的是“图片在一个容器里怎么不变形”，但今天的网页要面对的是手机、平板、电脑各种屏幕。你可能在电脑上看着完美的图片，换成手机就糊了，或者明明是个高清图，在小屏上却加载半天，体验很差。这就涉及响应式图片的知识。

5.1 srcset 和 sizes 的配合参数，到底怎么算

srcset和sizes是 HTML 原生提供的响应式图片方案。srcset可以列出多张不同尺寸的图片，让浏览器根据当前屏幕宽度和像素密度自行选择最适合的一张去加载。这个机制可以避免手机加载 1920 像素的大图，省流量也加快首屏速度。

一个常见的写法是这样的：

<img srcset="small.jpg 480w, medium.jpg 1024w, large.jpg 1920w" sizes="(max-width: 600px) 100vw, (max-width: 1200px) 80vw, 1200px" src="medium.jpg" alt="响应式图片示例" >

480w、1024w、1920w表示图片实际的像素宽度；sizes告诉浏览器“在不同的媒体条件下，图片在页面里大约占多少宽度”，这里用vw表示视口宽度的百分比，也可以用px或calc()。浏览器拿到这些信息后，会结合设备的实际像素密度，自己挑选一张最合适的图片加载。

这套机制的好处是：图片不需要依赖 CSS 缩放就能在不同屏幕上获得合理清晰度。因为如果你在 CSS 里把一张 480px 的图放大显示到 1200px 宽度，它必然模糊；而用srcset把 1200px 宽度的图提供给大屏设备，清晰度就会有保障。同时它也不会影响图片的比例，因为最终显示尺寸还是由 CSS 控制，二者各司其职。

5.2 使用 picture 标签应对特殊比例需求

srcset适合处理“同一张图、不同分辨率”的情况，但有时你希望在不同屏幕下展示不同比例、不同构图的图片。比如电脑上显示横版完整的风景照，手机上希望显示竖版只截取中间人像区域。这时可以用picture标签搭配多个source子元素来实现。

<picture> <source media="(min-width: 768px)" srcset="wide.jpg"> <source media="(max-width: 767px)" srcset="mobile.jpg"> <img src="default.jpg" alt="多设备适配图片"> </picture>

浏览器会从上到下匹配media条件，选中第一个满足条件的source去加载对应图片。picture内部必须有一个<img>作为兜底，这个<img>同时负责实际的显示尺寸和样式，所以前面提到的object-fit依然可以直接用在它身上。

我在做营销落地页的时候经常用这个方案：电脑端放一张大气的全景图，手机端换成一张重点信息居中的竖版图。两张图比例不同，但最终都能以“完整显示”的姿态出现，用户体验会比硬拉伸好很多。

5.3 懒加载与图片尺寸：避免“显示出来了但没位置”的尴尬

懒加载是另一个现代网页绕不开的话题。通过给图片加loading="lazy"，浏览器会在图片即将进入视口时才加载它，这对长列表页面性能帮助非常大。但懒加载有一个副作用：如果图片没有预设尺寸，页面滚动时图片才撑开，会出现布局突跳。

解决办法还是老规矩：给图片容器预设aspect-ratio，或者用width和height属性标记图片原始比例。比如：

<img src="lazy.jpg" width="800" height="600" loading="lazy" alt="懒加载示例" >

这里的width和height并不是“强制显示尺寸”，而是给浏览器提供比例参考，让它在图片加载前就知道该留多大位置。配合 CSS 的max-width: 100%; height: auto;，最终显示依然会是响应式的。这个技巧能显著降低 pagespeed 里的 CLS 指标，我建议所有长列表页面都加上。

6. 常见问题排查与避坑：图片显示问题的“急诊手册”

即使前面所有内容你都掌握了，实际项目里还是会冒出各种意想不到的问题。这一章我专门整理一个“急诊手册”，把最常遇到的图片显示相关问题和解决思路列清楚，以后你遇到同类问题直接照方抓药。

6.1 图片显示问题速查表

6.2 实操心得：三种典型场景的最佳实践

第一类场景，头像与缩略图。这类图片通常需要铺满且不变形，我会优先选object-fit: cover，同时配合object-position保证人脸或主体内容不跑偏。尺寸上建议直接用正方形或由aspect-ratio: 1 / 1控制。

第二类场景，商品或内容图。要求看到全貌，我必用object-fit: contain，外层容器给一个浅灰或浅白背景。商品图本身就讲究真实还原，宁可留白也不能裁剪，这是电商后台的共识。

第三类场景，通栏 banner 或全屏背景。这类图片视觉上要铺满，还要不变形，我只能推荐cover，同时尽量让设计提供宽幅图，避免裁剪到核心文案。如果还担心不同屏幕下主体被裁，可以使用picture方案，让不同断言加载不同构图的图。

另外还有一个容易被忽略的细节：当图片加载失败时，很多浏览器会显示一个破碎图标，十分碍眼。我通常会顺手给图片设置一个背景色，同时使用onerror替换成占位图，或者干脆用 CSS 伪类隐藏碎图。这里给一个小段示例：

img { background-color: #f0f0f0; }

图片没加载出来或者加载失败时，至少会呈现一灰色底块，视觉上不那么“炸裂”。

6.3 图片不显示的另类“假故障”：后缀名与跨域限制

有时候你会碰到图片怎么都显示不出来的问题，但不是 CSS 的锅。比如图片路径里有中文或空格，没有做 URL 编码，导致请求 404。再比如某些图片服务器开启了防盗链，你直接引用它的图片地址，请求会返回 403，页面同样显示不出图。这类问题不是“如何显示图片”这套逻辑能解决的，而是资源获取的问题，排查的时候多看一眼控制台网络请求的状态码即可。

还有一个容易踩的坑是图片路径写成了相对路径，层级没算对，比如img src="images/photo.jpg"但页面在二级目录下，浏览器会按二级目录去拼路径，结果 404。这种问题看着低级，但在多人协作的项目里经常出现。我的习惯是统一用绝对路径或者以项目根目录为基准的路径，避免目录层级变化导致图片失效。

最后关于性能多说一句：一张 10MB 的高清原图，即使你object-fit: contain显示得再完美，加载也会卡顿。前端显示图片的“完美”，一定是建立在正确压缩过的图片资源上的。我一般会在上传阶段就把图片压到合理范围，WebP 优先，其次 JPEG，PNG 只用在需要透明底的场景。图片本身质量过关，后面的显示问题会少一大半。

这套玩法我用了很多年，从 PC 端后台到移动端 H5，从静态页面到带复杂交互的应用，几乎覆盖了所有图片展示需求。如果你正在被图片变形、被裁剪、被撑爆布局这些事折磨，可以直接把上面这些方案搬到项目里试试。踩过几次坑之后你也会有同感：图片显示从来不是“放上去就行”，而是“怎么放得准、放得稳、放得好看”的系统工程。