在网页设计中，通栏banner通常指宽度撑满整个视口的图片展示区。由于用户设备屏幕比例不一，如果直接把一张固定尺寸图片设为宽度100%，往往会出现图片被压扁、裁切或上下留白的情况。要让通栏banner图片等比例显示且不裁剪不留白，最实用的办法是利用CSS的object-fit属性配合合理的容器设置。
为什么会出现裁剪或留白
当图片的宽高比和显示区域的宽高比不一致时，浏览器默认会拉伸图片使其填满容器，导致变形；若限制图片尺寸又可能填不满容器从而产生留白。过去常用背景图方式，但通过img标签也能优雅解决。
使用object-fit实现等比例显示
object-fit可以控制替换元素（如img）的内容如何适应容器。其中contain值会让图片完整显示并保持比例，不会裁剪也不会变形，不足部分由容器背景补充；而cover会填满容器但可能裁剪。若要做到绝对不留白也不裁剪，只能接受容器比例随图片变化，或使用contain并接受留白由背景色填充。
基础实现代码
以下示例让banner图片宽度通栏，高度按图片原始比例自适应，图片始终完整显示：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
.banner {
width: 100%;
/* 不固定高度，由图片撑开 */
background: #f0f0f0; /* 留白区域背景色 */
}
.banner img {
display: block;
width: 100%;
height: auto;
object-fit: contain; /* 等比例完整显示 */
}
</style>
</head>
<body>
<div class="banner">
<img src="https://picsum.photos/1200/400?random=2" alt="通栏banner">
</div>
</body>
</html>
固定高度但避免裁剪的方案
如果设计上必须固定banner高度，又不想裁剪图片内容，可用contain配合居中，此时两侧或上下可能有背景留白，但内容完整：
.banner-fixed {
width: 100%;
height: 300px;
background: #eaeaea;
display: flex;
justify-content: center;
align-items: center;
}
.banner-fixed img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
使用padding-top百分比技巧
在早期兼容方案中，常用padding-top基于宽高比撑开容器，再将图片绝对定位填满，这样能保持容器比例与图片一致，不会留白也不会裁剪：
<style>
.ratio-banner {
position: relative;
width: 100%;
padding-top: 33.33%; /* 图片宽高比 3:1 */
overflow: hidden;
}
.ratio-banner img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover; /* 此时比例一致，cover等同contain */
}
</style>
<div class="ratio-banner">
<img src="https://picsum.photos/1200/400?random=3" alt="banner">
</div>
总结
要让通栏banner等比例显示且不裁剪不留白，关键在于让容器宽高比与图片一致，或用object-fit:contain接受背景留白。根据设计需求选择方案，现代浏览器推荐直接使用img加object-fit，简单且易维护。
CSSobject-fitresponsive_image修改时间：2026-07-27 17:33:26