如何在Bootstrap 4中让图片尺寸匹配文本列尺寸？

完全可以实现你要的效果，核心是让图片的尺寸依赖于文本的字体大小（而非固定像素），结合Bootstrap 4的布局系统就能搞定，具体实现步骤如下：

1. 基础布局结构 #

用Bootstrap 4的网格和卡片组件搭建左右两列布局，左侧放文本，右侧放多行图片：

<div class="card">
  <div class="row no-gutters">
    <!-- 左侧文本列 -->
    <div class="col text-column">
      <div class="card-body">
        <p class="card-text">这里是你的长文本内容，当使用Ctrl+/-缩放文本时，右侧图片会同步缩放，保持列尺寸匹配...</p>
        <!-- 更多文本内容 -->
      </div>
    </div>
    <!-- 右侧图片列 -->
    <div class="col image-column">
      <div class="image-item">
        <img src="你的图片地址" alt="图片描述" class="img-fluid">
      </div>
      <div class="image-item">
        <img src="另一张图片地址" alt="图片描述" class="img-fluid">
      </div>
      <!-- 更多图片项 -->
    </div>
  </div>
</div>

2. 关键CSS设置 #

通过**相对单位（em/rem）**绑定图片容器与文本的字体大小，让图片随文本缩放同步变化：

/* 文本列的基准字体大小，浏览器缩放文本时该值会自动调整 */
.text-column {
  font-size: 1rem;
}

/* 图片容器尺寸基于文本字体大小，保证缩放比例一致 */
.image-item {
  width: 12em; /* 宽度为12倍文本字体大小，可根据需求调整 */
  margin-bottom: 1.5em; /* 图片间距也用相对单位，保持排版比例 */
}

/* 图片自适应容器，保持比例不变 */
.image-item img {
  max-width: 100%;
  height: auto;
  display: block;
}

原理说明 #

浏览器的Ctrl+/-文本缩放功能，本质是调整页面的字体基准值（根元素或当前元素的font-size）。用em（基于当前元素字体大小）或rem（基于根元素字体大小）设置图片容器尺寸时，这些值会随字体大小同步变化，从而实现图片与文本列尺寸的匹配。

如果需要固定图片的宽高比例，还可以给.image-item添加aspect-ratio: 16/9;（根据你的图片比例调整），确保图片缩放时不会变形。

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