如何使用Bootstrap 4在列内放置不同尺寸的响应式图片

你可以直接用Bootstrap 4自带的网格嵌套系统实现，仅需加极少量自定义CSS保证图片适配，不需要引入额外工具。 #

1. 基础HTML结构 #

核心逻辑是外层拆分为左右两个等高列，右侧列内部嵌套两层网格实现错落排版：

<div class="container my-4">
  <div class="row align-items-stretch">
    <!-- 左侧大图列 -->
    <div class="col-md-6 mb-3 mb-md-0">
      <div class="h-100 hover-box"> <!-- hover-box是你已经实现的悬停效果容器 -->
        <img src="你的第一张图地址" class="w-100 h-100" style="object-fit: cover;" alt="图片1">
      </div>
    </div>
    <!-- 右侧组合列 -->
    <div class="col-md-6">
      <div class="row">
        <!-- 右侧顶部横图 -->
        <div class="col-12 mb-3">
          <div class="h-100 hover-box">
            <img src="你的第二张图地址" class="w-100 h-100" style="object-fit: cover;" alt="图片2">
          </div>
        </div>
        <!-- 右侧底部两小图 -->
        <div class="col-6">
          <div class="h-100 hover-box">
            <img src="你的第三张图地址" class="w-100 h-100" style="object-fit: cover;" alt="图片3">
          </div>
        </div>
        <div class="col-6">
          <div class="h-100 hover-box">
            <img src="你的第四张图地址" class="w-100 h-100" style="object-fit: cover;" alt="图片4">
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

2. 可选全局样式优化（避免图片变形） #

如果不想写内联样式，可以把公共规则抽成CSS类：

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

之后直接给所有img标签加img-grid-item类即可。 #

3. 响应式规则说明 #

• 屏幕宽度≥768px（Bootstrap md断点）时自动展示错落的网格效果
• 屏幕宽度<768px时所有图片自动堆叠为单列，适配移动端展示
• 如果需要调整断点，把所有col-md-*换成col-sm-*或col-lg-*即可匹配你要的响应式触发时机

你已经实现的悬停效果可以直接挂载在hover-box容器上，不会和现有布局冲突。

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