如何使用Bootstrap和CSS实现图片适配固定4:3比例且不裁剪核心内容

这个需求完全可以通过纯CSS实现，无需额外JavaScript逻辑，也不会和Bootstrap原有布局规则冲突，具体实现如下：

第一步：修改HTML结构 #

你只需要在col-md-4内部、img标签外层新增一个比例锁容器即可，修改后的结构如下：

<div class="row">
  <div class="col-md-4">
    <!-- 新增4:3比例锁容器 -->
    <div class="img-container-4by3">
      <img class="img img-responsive" src="..." />
    </div>
  </div>
  <div class="col-md-8">
    <!-- 其他内容 -->
  </div>
</div>

第二步：添加自定义CSS规则 #

.img-container-4by3 {
  /* 容器宽度跟随父级col-md-4的宽度自适应 */
  width: 100%;
  /* padding-top百分比基于父元素宽度计算，75%对应宽高比4:3，固定容器高度 */
  padding-top: 75%;
  position: relative;
  /* 你想要的背景灰色，可自行调整色值 */
  background-color: #eeeeee;
  overflow: hidden;
}

.img-container-4by3 img {
  position: absolute;
  /* 图片绝对定位居中 */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* 限制图片最大宽高不超出容器，保证完整展示不裁剪 */
  max-width: 100%;
  max-height: 100%;
  /* 保持图片原始宽高比，避免拉伸 */
  width: auto;
  height: auto;
}

实现效果说明 #

1. 容器的宽高比会始终固定为4:3，完全跟随Bootstrap栅格的响应式宽度变化，和原有4:3图片的展示容器高度完全一致
2. 原始比例为4:3的图片会自动填充满容器，和原有展示效果完全一致
3. 过宽的图片会自动匹配容器高度，左右两侧留背景色空隙
4. 过高的图片会自动匹配容器宽度，上下两侧留背景色空隙
5. 所有图片都会保持原始比例居中展示，不会出现拉伸、裁剪问题

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