Bootstrap 3 如何在.col-sm-6列中裁剪图片仅显示中心区域？

云上老周

2026-8-8

在Bootstrap 3的.col-sm-6中裁剪图片显示中心50%区域

要实现裁剪图片左右两侧、仅显示原始宽度50%的中心部分，不需要依赖.img-responsive（它的作用是等比缩放），可以用两种实用方法：

方法一：img标签+容器裁剪

适合需要保留img标签（比如SEO需求、图片交互场景）的情况：

HTML结构

<div class="col-sm-6 img-crop-container">
  <img src="你的图片路径.jpg" alt="图片描述">
</div>

自定义CSS

.img-crop-container {
  position: relative;
  overflow: hidden;
  /* 可选：如果需要固定高度，取消注释并设置值 */
  /* height: 220px; */
}

.img-crop-container img {
  position: absolute;
  left: 50%;
  /* 让图片水平居中，确保裁剪的是左右两侧 */
  transform: translateX(-50%);
  /* 图片宽度设为容器的2倍，容器可视区域刚好对应图片中心50% */
  width: 200%;
  height: auto;
}

原理

容器通过overflow: hidden隐藏超出部分，position: relative作为图片定位的参考
图片绝对定位后，用left: 50%+transform: translateX(-50%)实现水平居中
图片宽度设为容器的2倍，容器刚好显示图片中心50%区域，自动裁剪左右多余部分

方法二：背景图（更简洁）

如果不需要img标签，用背景图的方式更省心，自动实现中心裁剪并填满容器：

HTML结构

<div class="col-sm-6 img-crop-bg" style="background-image: url('你的图片路径.jpg');">
</div>

自定义CSS

.img-crop-bg {
  background-position: center center;
  /* 让背景图覆盖容器，自动裁剪中心区域 */
  background-size: cover;
  /* 必须设置高度，否则容器高度为0；用百分比padding-top可维持图片原始比例 */
  /* 例：原始图片是720x480（3:2比例），设置padding-top: 66.66% */
  padding-top: 66.66%;
  /* 或者固定高度：height: 250px; */
}