CSS图片只显示左侧区域：object-fit与object-position实战指南

我最近在做一个活动专题页的时候，遇到了一个挺有意思的需求：页面头图是一张特别宽的横幅图，但设计师给的素材比例和页面容器对不上，图片一放进去就被压缩变形了。问了下设计，对方的回复是“就截取图片左侧一部分显示就行，不需要缩放适配”。这个需求听起来简单，但真做起来，里头的细节还不少——尤其是要兼容不同屏幕尺寸、考虑响应式布局的时候，直接用<img>标签塞进去是会有各种意外的。这篇就从一个实际完整的角度，来聊聊“比较宽的图片只显示左侧区域”这个场景背后，最实用的几种解法，以及为什么你会遇到图片自己居中显示、右侧漏出来这种奇怪问题。

1. 搞懂需求本质：是“裁剪显示”而不是“缩放适配”

很多人在接到这个需求时，第一反应是把图片宽度设为100%，然后靠height去限制。但这样做的结果往往是：图片被纵向拉伸，人、字都变形了。为什么要只显示左侧区域？通常有几种业务场景：海报式头图只保留主体信息、商品大图在列表里只需要左侧局部特写、或者是一张长横幅在窄屏容器里需要固定显示某一部分。

这个需求的核心，是“视觉裁切”——图片宽度比显示区域宽很多，多余的部分被隐藏，只保留左边的可见区域。这和常见的“背景图居中裁切”不一样，也和“等比缩放铺满”不一样。搞清楚这一点之后，方案选型才有依据，后面才不会绕弯子。

1.1 显示区域与图片尺寸的关系分析

先理清一个基础概念：一个图片在页面里展示，涉及到的变量有图片原始尺寸（图片自身像素宽高）、容器尺寸（你给它分配的宽高）、以及图片在容器里的定位方式（左对齐、居中还是右对齐）。当图片宽于容器时，如果不对图片做特殊处理，浏览器默认会让图片左边缘和容器左边缘对齐，图片宽度继续按原样撑开，超出容器的部分会被overflow: hidden裁掉——这种情况下，“只显示左侧区域”看起来好像是天然成立的。

但为什么实际操作中总会出问题？因为还有另一个因素：如果图片设置了width: 100%，它会强制图片宽度等于容器宽度，图片按比例跟随缩放，这时候图片的“左侧区域”其实是完整被压缩后的结果，不再是原始图片的左侧局部。有些场景下这种等比缩放是可以接受的，但如果容器宽高比和图片原始比例相差太大，图片会变得特别矮小或特别瘦长，视觉上完全不是设计师想要的。

1.2 为什么常见的“img + overflow”方案会翻车

还有人会说，用<img>标签，外面包一层div，给div设置固定宽高，再加overflow: hidden，图片设成width: auto; height: 100%，这样不就能只显示左侧了吗？这个思路方向对，但在实际项目中会碰到几个坑。

第一，图片的height: 100%依赖于父容器有确定的height，如果父容器的高度是auto或者由内容撑开的，那图片的height: 100%会失效，最终图片宽度不受控，布局直接乱掉。第二，<img>默认是内联元素，会有基线对齐问题，图片下方会出现几像素的空白，需要额外处理display: block。第三，当你需要在不同屏幕宽度下都精确控制“显示哪一部分”时，纯靠<img>标签做起来非常别扭——它没有专门控制显示区域的属性，只能靠外层容器的overflow去遮挡。所以，我在这篇文章里会更推荐使用背景图方式，或者配合object-fit来控制，后面会详细说。

2. 核心技术点：object-fit 与 object-position 的精细控制

如果你非要用<img>标签（比如要兼顾SEO、图片懒加载、或者图片是CMS后台动态传进来的），那object-fit是你的第一选择。这个属性的作用，通俗点说，就是告诉浏览器：图片这个“内容”怎么放进“盒子”里，是塞满、留白、还是裁切。

2.1 object-fit 的取值对比与选择逻辑

object-fit支持fill、contain、cover、none、scale-down这些值。对应的效果分别是：拉伸填满、完整包含（可能有留白）、裁剪填满、不缩放原样放置、按较小尺寸适应。

针对“比较宽的图片只显示左侧区域”这个需求，有两个值会进入备选：cover和none。cover表示图片保持宽高比，但是缩放后填满整个盒子，超出的部分会被裁掉——配合object-position可以控制裁切的位置。none表示图片保持原始尺寸，不做任何缩放，如果图片比盒子大，默认显示左上角内容。

这两个的区别在于：cover在容器宽高比和图片宽高比不同时，会等比放大图片到刚好完全覆盖盒子——也就是说，它可能把图片放大到超出容器所需尺寸，再把多余部分裁掉。对“要显示左侧区域”这个需求来说，cover和none最终的呈现可能非常相似，但cover的好处是无论容器尺寸怎么变，图片都能完整覆盖显示区域，不会留白，而none在容器变宽时会露出图片右侧的内容，破坏“只显示左侧”的约束。

2.2 真正好用的组合拳：object-fit: cover + object-position: left center

直接给结论：大部分情况下，推荐用object-fit: cover配合object-position: left center。这个组合的含义是——图片等比缩放铺满整个容器，如果图片在宽度或高度方向上超出容器，就优先保留左侧区域，垂直方向保持居中。

写出来的CSS长这样：

css复制.banner {
  width: 100%;
  height: 300px;
}

.banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
}

有人会疑惑，img都设了width: 100%，object-fit: cover还有意义吗？有。因为高度被固定了，而图片的宽高比和容器宽高比不一致，所以图片在某个维度上一定会被裁剪。object-fit: cover保证图片始终铺满，而object-position: left center规定“铺满之后，多余的部分往右裁”，这样视觉上就是只显示图片左侧。

如果要控制得更精细，也可以把left center改成像素值，比如object-position: -50px center，表示左移50像素后再居中——也就是说，你可以精确控制显示图片的哪个局部区域。这在某些需要手动微调的运营活动页里特别实用。

2.3 从容器定位的另一种思路：background 两件套

如果你的图片是纯粹作为展示背景使用、不需要被搜索引擎收录、也不需要右键保存之类，那用background-image方式会更省心。核心是background-size: cover搭配background-position: left center。

css复制.banner {
  width: 100%;
  height: 300px;
  background-image: url('https://example.com/wide-banner.jpg');
  background-size: cover;
  background-position: left center;
  background-repeat: no-repeat;
}

background-size: cover的语义和object-fit: cover一致——图片等比缩放、完全覆盖背景区域、超出部分被裁掉。background-position则是控制“背景图像在背景区域中的位置”，left center表示水平靠左、垂直居中。

用背景图方式还有一个额外好处：图片的加载时机和渲染方式由浏览器自己控制，不需要考虑<img>标签的布局占位问题，也不会有内联元素的基线干扰。但它也有短板——对SEO不友好，对无障碍访问也不友好（屏幕阅读器读不到背景图信息），所以如果图片包含重要内容信息，尽量别用纯背景方式。

3. 实操过程中遇到的三个典型场景及对应解法

理论说了一堆，来讲讲实际的。我分三种常见场景来分析：第一种是固定尺寸容器，第二种是响应式容器（宽度变化、高度固定），第三种是响应式容器（宽高都跟随视口变化）。三种场景的适配难度递增，解法也略有差异。

3.1 固定尺寸容器：最简单，但别忽略容器自身的显示边界

这是最理想的情况，图片的显示区域在桌面端和移动端都是一个定值，比如width: 600px; height: 300px。这种情况下，用object-fit: cover或者背景图方式，都能非常稳定地实现“只显示左侧”。但有一个细节容易忽略：容器的overflow属性。如果外层还有父容器，而父容器没有设置overflow: hidden，即使子容器固定宽高，如果图片或内容溢出，一样可能影响页面布局。

我建议，在做固定尺寸容器时，代码里主动加上overflow: hidden。哪怕是背景图方式，也建议加上，防止未来有人往容器里塞其他内容时把布局撑爆。另外，固定尺寸容器在移动端需要考虑实际可用视口宽度——如果设计稿给的尺寸是600px，但移动端视口只有375px，固定宽度会导致横向滚动条。所以，这个方案通常用于中大屏适配，移动端需要另做一套样式。

3.2 响应式容器（宽度可变、高度固定）：最常见的活动页头图场景

活动页的头图经常是：桌面端宽度是整行，高度固定为300px或400px，移动端宽度变成375px，高度还是300px。这种“宽度变、高度不变”的场景，是我实际项目中遇到最多的，解法上首选object-fit: cover。

但这里有个坑：如果直接用<img>标签，图片会在加载完成的瞬间撑开容器高度——如果容器高度没有显式设置，而图片原始尺寸很大，页面会产生一次明显的布局抖动。我的习惯是，给图片外层容器设置明确的height，并且给图片设置width: 100%; height: 100%，这样图片尺寸完全由容器控制，加载前后高度不变，不会跳动。

如果你用background-image方案，同样要给容器写一个明确的height，否则容器高度会是0，背景图根本不会显示。很多新手会在这里卡住，我提醒一下：背景图不会撑开容器，必须自己给容器设定高度。

3.3 响应式容器（宽高同时变化）：使用aspect-ratio或padding-top技巧

如果是那种铺满整个视口的全屏头图，宽高都要跟随屏幕变化，只显示左侧区域的需求就更有挑战了。这种情况下，我更推荐使用aspect-ratio属性来锁定容器的宽高比，再配合object-fit来实现。

css复制.banner {
  width: 100%;
  aspect-ratio: 16 / 6;
  overflow: hidden;
}

.banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
}

aspect-ratio: 16 / 6的意思是：容器的宽度和高度比例固定为16比6，宽度变了，高度自动按比例计算。这就能保证不同屏幕下头图的比例始终一致，不会出现桌面端像一条扁扁的带子、移动端突然变成方形的问题。

在老一些的项目里，没有aspect-ratio属性（或者需要兼容特别老的浏览器），通常会用padding-top百分比技巧。原理是：padding-top的百分比值是相对于父容器宽度计算的，所以设置padding-top: 37.5%（对应16:6的比例）可以让容器高度跟随宽度等比变化，再配合绝对定位把图片塞进去。这个技巧现在用得少了，但在一些老系统改造中仍然有实用价值。

4. 常见问题与排查技巧实录

实际操作中，总会遇到一些奇怪的现象，这里我把几个高频问题整理出来，方便排查。

4.1 图片没有只显示左侧，而是居中显示右侧内容也露出来了

这个问题基本可以断定是object-position或background-position没有生效。排查思路是：先看图片用的是<img>还是背景图，再分别检查这两个属性的值。如果用的是<img>，可能的原因是你设置了object-fit: cover但没写object-position: left center，默认值是50% 50%，也就是居中——图片就会从中间开始裁剪，左右两侧各露一部分。如果写了object-position还是没有变化，检查一下是否有其他CSS优先级更高的选择器覆盖了它，或者object-fit是否在某个媒体查询里被重置了。

4.2 移动端和桌面端显示的区域不一样

这个问题通常是由容器比例变化引起的。桌面端宽度大，图片缩放大；移动端宽度小，图片缩放小——虽然都是cover，但裁切的位置会因为比例不同而变动。如果设计师要求“任何屏幕上都显示图片左侧区域”，left center基本能满足；但如果要求“任何屏幕上都显示图片左侧的某个固定内容点”，比如一个人的脸部或一款产品的Logo，那就不能全靠CSS了，可能需要在不同断点下动态调整object-position的像素偏移量。

我一般这么处理：在关键断点用媒体查询覆盖object-position，比如桌面端是left center，移动端改成-20px center，通过几轮真机测试微调位置。每次调整完，记得同时检查不同尺寸的截图。

4.3 图片加载后出现白边或空隙

如果容器高度设定了，但图片高度没有跟随容器，object-fit: cover没有把图片高度撑满，就会出现纵向的空白。最常见的原因是容器的高度写法问题——比如高度用了auto，或者图片的高度没有设成100%。再有一个容易被忽略的：图片的display默认是inline，会产生基线空白，虽然不会造成很明显的空隙，但在某些场景下会影响垂直居中效果。稳妥做法是给图片加display: block。

如果你的场景是背景图方式，空隙问题通常出现在高度设成min-height而不是height时——背景图会铺满height区域，但在容器高度被内容撑大后，背景图下方可能留出空白。这种情况要区分清楚：背景图永远只覆盖容器的内容区域，不会跟着内容扩张而拉伸。

4.4 图片过宽导致页面加载缓慢或内存占用过高

“只显示左侧区域”不代表图片只需要加载左侧部分——浏览器还是会下载整个图片文件。如果头图是一张特别宽的图片，文件体积可能很大，这会影响首屏加载速度。我的建议是：对图片做处理，要么压缩整体文件体积，要么用CSS切割素材让前端只请求需要的部分，要么用图片服务（如CDN的自定义裁剪能力）生成指定尺寸的图片再给前端用。

实际项目中，我一般会准备两套图：一套是完整大图（给宽屏），一套是移动端尺寸更小的局部图（给窄屏），然后通过<picture>元素根据屏幕宽度切换。这样既能保证显示区域正确，又能控制加载体积。如果不想搞得太复杂，至少要做srcset和sizes——让浏览器自行选择合适尺寸的图片资源。

4.5 特殊比例、高分辨率屏下图片发虚

当容器特别宽，而图片本身的原始像素宽度不够时，object-fit: cover会把图片放大，放大后就会出现模糊。解决办法有两个方向：一是让设计提供更高分辨率的素材，尽量保证图片的原始宽度大于等于容器在最高分辨率下的渲染宽度；二是让图片保持等比缩放，不做过大的放大裁切。

我个人的建议是，图片资源建议准备两倍以上（即2x）的尺寸，特别是头图这类视觉权重高的位置——在Retina屏幕上，1倍图会明显发虚，影响整体质感。如果图片过宽导致文件过大，可以在质量和体积之间找个平衡点，稍微牺牲一点文件体积，保清晰度。

5. 性能优化、可访问性与扩展思考

最后一部分，聊聊除了CSS以外，还需要注意的事情。我见过太多人只关注实现效果，忽略了性能和无障碍这些问题，结果上线之后被各种抱怨。

5.1 图片懒加载与优先级控制

如果“只显示左侧区域”的图片在页面首屏，建议添加fetchpriority="high"和loading="eager"，让浏览器优先加载这张图片。如果在首屏以下、用户需要滚动才能看到，可以加loading="lazy"，懒加载能减少初始请求压力。

有个细节：如果图片是用背景图方式实现的，懒加载就不是加一个loading属性那么简单了。比较方便的做法是通过JavaScript监听元素进入视口后再动态设置背景图URL。如果图片在首屏，就别懒加载了，直接内联或者用最高优先级加载，体验更稳。

5.2 无障碍与语义化

如果使用<img>标签，一定要写alt属性，描述图片内容。比如“品牌周年庆横幅”，屏幕阅读器用户就能知道这里是什么。如果图片只是作为装饰，没有实际信息，alt可以留空（alt=""），这样读屏软件会跳过它。

背景图方式天然对读屏软件不可见，所以如果图片承载了重要的文字信息，尽量把重要文字放在HTML里，而不是压在背景图上。我习惯的做法是：背景图只做氛围装饰，重要信息用HTML文本或绝对定位的<div>覆盖在图上。

5.3 换个思路：图片切割与服务端适配

如果你的项目用到了对象存储、CDN或图片处理服务，还有一个更优雅的方案：在服务端根据客户端传入的尺寸参数，直接生成一张只包含左侧区域的图片，前端拿到的就是一张已经裁好的图。前端代码不用做任何object-fit处理，图片本身就是显示区域的适合尺寸，加载速度和缓存效果都更理想。

这种思路适合图片资源会被反复复用、请求量较大的场景，比如电商的商品主图、社交平台的头图区域。如果只是活动页一次性用的头图，直接在本地处理好也不麻烦——用Photoshop或在线裁剪工具把图裁好传上去就行，等不到前端来做裁切。

5.4 关于“只显示左侧区域”的延伸思考

你会发现，“只显示左侧区域”这个需求背后，其实反映的是设计师对视觉焦点的控制欲望。实现方式有很多，CSS方案也好、服务端方案也好，本质都是“在有限的显示区域内，展示图片最想给用户看的部分”。

我的一个心得是：在动手编码之前，先和设计确认清楚“左侧区域”是不是固定概念。有些设计师说的“只显示左侧”，实际上指的是“只显示包含主体内容的区域”，如果图片右侧还有重要内容，他们可能希望侧重点不同。与其反复改CSS，不如先把需求沟通清楚，再做技术方案。

如果你在项目里也遇到了类似的图片裁剪需求，不妨先从这篇文章里的object-fit组合拳开始尝试，然后在实际效果的基础上按需调整。图片裁切这事，明白原理之后，剩下的都是细节打磨。