Bootstrap5图片无法随容器自适应缩放溢出div如何解决

• 目标效果：图片随所属div自适应尺寸，始终容纳在div内部。
• 异常表现：调整浏览器窗口大小或在笔记本设备上查看时，图片总会溢出到下方的div区域，移动端无该异常。
• 已尝试操作：使用Bootstrap v5框架，先后尝试img-fluid、img-responsive两种图片类，添加多组自定义样式，均未解决问题。
• 效果参考：
  
• 备选方案：添加响应式断点编写对应CSS样式，但判断该需求存在更简便的实现方式。
• 原始复现代码：

#cover2 {
  background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)), url("https://www.kelvindalewhisky.com/public/img/2.jpg");
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  padding-top: 50px;
  display: flex;
}

.wrapper {
  padding-top: 100px;
  height: 100%;
  width: auto;
  display: flex;
  margin: auto;
}

.wrapper img {
  height: 80%;
  width: auto;
}

img {
  max-width: 100%;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<section id="cover2">
  <div class="container">
    <div class="row">
      <div class="wrapper">
        <div class="col-md-12">
          <img src="https://www.kelvindalewhisky.com/public/img/kelvindalegold.png" alt="..." class="img-fluid" class="img-responsive">
          <br><br>
          <a href="index.php#example"><span style="font-size: 60px; color: #ec894b;"><i class="fas fa-chevron-down icn_blue wow shake"  data-wow-duration="1500ms"></i></span></a>
        </div>
      </div>
    </div>
  </div>
</section>

• 高度基准缺失：#cover2和.wrapper都设置了height: 100%，但父元素未设置明确高度基准，百分比高度会按内容实际高度计算，没有形成有效高度约束，图片渲染时自然会撑出容器。
• 栅格结构破坏：Bootstrap栅格要求row必须直接包裹col-*列，代码中.wrapper插在row和col-md-12之间，破坏了栅格自带的flex布局约束，导致img-fluid的响应式规则无法正常生效。
• 样式优先级冲突：自定义样式.wrapper img {height: 80%; width: auto;}优先级高于img-fluid自带的height: auto规则，覆盖了图片高度自适应逻辑，窗口缩放时图片仅按固定比例计算高度，不会随容器宽度收缩。
• 冗余代码失效：img标签写了两个class属性，第二个class="img-responsive"不会被浏览器识别，且img-responsive是Bootstrap v3的类，v5版本已移除该类；全局img {max-width: 100%}和img-fluid自带规则重复，无实际作用。

无需额外添加响应式断点，修改4处逻辑即可解决问题：

1. 给外层容器设置明确高度基准，将#cover2的height: 100%替换为min-height: 100vh，保证容器至少占满一整个视口高度，不会被内容随意撑高。
2. 修正栅格嵌套结构，将.wrapper整合到col-md-12上，避免打断row和列的层级关系。
3. 替换图片的固定高度设置，将height: 80%改为max-height: 75vh+height: auto，既限制图片最大高度不超出视口，又保留图片等比缩放的能力。
4. 清理冗余代码：删除img标签上重复的class属性、失效的img-responsive类、重复的全局img样式规则。

修复后的完整代码：

#cover2 {
  background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)), url("https://www.kelvindalewhisky.com/public/img/2.jpg");
  min-height: 100vh;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  padding-top: 50px;
  display: flex;
}

.wrapper {
  padding-top: 100px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin: auto;
}

.wrapper img {
  max-width: 100%;
  max-height: 75vh;
  width: auto;
  height: auto;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<section id="cover2">
  <div class="container">
    <div class="row">
      <div class="col-md-12 wrapper">
        <img src="https://www.kelvindalewhisky.com/public/img/kelvindalegold.png" alt="品牌标识" class="img-fluid">
        <br><br>
        <a href="index.php#example">
          <span style="font-size: 60px; color: #ec894b;">
            <i class="fas fa-chevron-down icn_blue wow shake" data-wow-duration="1500ms"></i>
          </span>
        </a>
      </div>
    </div>
  </div>
</section>

修复后任意窗口尺寸下，图片都会保持原始比例，既不会超出容器宽度，也不会溢出到下方区块，无需额外编写多断点响应式代码。

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