固定div高度时设置图片宽度 实现图片溢出出血居中布局

效果示意（虚线区域为溢出裁切的出血部分）：
#

实现思路 #

你之前用相对+绝对定位的思路是对的，缺的是自动居中的偏移逻辑，不需要手动计算图片尺寸，用CSS原生偏移能力就能实现「图片高度固定不缩放、容器宽度变化时两侧均等裁切溢出内容、图片始终水平垂直居中」的效果，下面给两种可直接用的实现： #

方案1：全兼容方案（支持低版本浏览器） #

HTML结构 #

<div class="bleed-img-box">
  <img src="你的图片资源地址" alt="展示内容">
</div>

CSS样式 #

.bleed-img-box {
  /* 高度可自定义，支持px、vh等任意合法高度单位 */
  height: 420px;
  width: 100%;
  overflow: hidden; /* 隐藏溢出的出血区域 */
  position: relative;
}
.bleed-img-box img {
  height: 100%; /* 图片高度和容器绑定，永远保持固定值，不会缩放 */
  width: auto; /* 宽度按原始比例自动计算，保证图片不变形 */
  position: absolute;
  /* 水平+垂直双重居中，不需要知道图片具体尺寸 */
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

方案2：现代浏览器极简方案（推荐） #

不需要写绝对定位逻辑，借助CSS3的object-fit属性两行核心代码搞定，适配逻辑更稳定：

.bleed-img-box {
  height: 420px; /* 可自定义高度 */
  width: 100%;
  overflow: hidden;
}
.bleed-img-box img {
  height: 100%;
  width: 100%;
  display: block;
  object-fit: cover; /* 保持图片比例填充容器，超出部分自动裁切 */
  object-position: center; /* 图片相对容器始终水平、垂直居中 */
}

关键逻辑说明 #

• 给图片设置height:100%绑定容器高度，就能保证不管视口宽度怎么变，图片高度永远和你设定的容器高度一致，不会出现缩放
• 两种方案都会自动计算图片溢出的宽度，让左右两侧裁切的出血区域宽度完全相等，不会出现图片偏移、某一侧裁切过多的问题
• 垂直居中逻辑在图片高度和容器高度完全匹配时可以省略，加上是为了兼容后续容器高度调整、图片加载异常等边界场景

内容的提问来源于stack exchange，提问作者beeslaw