如何让Bootstrap 4中的图片尺寸不超出其父容器范围

• 外层.col设置了h-100继承了70vh的父容器高度，但包裹单张图片的三个.row未做高度限制，默认会按图片原始尺寸撑开整体高度
• Bootstrap内置的img-fluid仅约束图片宽度不超出父容器，高度会随宽度等比例缩放，不会主动适配父容器高度上限
• 未设置高度溢出裁剪规则，大尺寸图片会直接撑开父元素

直接替换你现有代码即可：

<!-- Bootstrap 4.1.x / Twitter-Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<!-- Body -->
<div id="main-container" style="opacity: 0.5;">
  <div class="container-fluid" style="position: fixed; bottom: 7%; height: 70vh;">
    <div class="row h-100">
      <!-- 新增d-flex flex-column让子行自动平分高度 -->
      <div class="col h-100 d-flex flex-column">
        <!-- 新增flex-1 overflow-hidden，每个行平分1/3父容器高度，超出部分自动裁剪 -->
        <div class="row flex-1 overflow-hidden">
          <!-- 新增高度适配规则，保证图片比例不变，不会超出行高 -->
          <!-- 如果需要图片填满整个行、不留空白，把object-fit: contain改成object-fit: cover即可 -->
          <img class="rounded-circle" src="https://via.placeholder.com/1920x1080.png" style="border: .2rem solid #1a4579; height: 100%; width: auto; object-fit: contain;">
        </div>
        <div class="row flex-1 overflow-hidden">
          <img class="rounded-circle" src="https://via.placeholder.com/1920x1080.png" style="border: .2rem solid #1a4579; height: 100%; width: auto; object-fit: contain;">
        </div>
        <div class="row flex-1 overflow-hidden">
          <img class="rounded-circle" src="https://via.placeholder.com/1920x1080.png" style="border: .2rem solid #1a4579; height: 100%; width: auto; object-fit: contain;">
        </div>
      </div>
    </div>
  </div>
</div>

• 去掉了原代码里冗余的width="100%" height="auto"属性和img-fluid类，避免样式冲突
• 所有元素高度不会超出70vh的父容器上限，完全不会出现溢出问题

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