图像不会根据容器的插图进行调整大小。我在做什么错？

Question

我只是想让一个图像调整大小以保持在其Div内，但是当我重塑浏览器大小或在笔记本电脑中查看时，它会继续溢出到下面的Div上。

我没有设置任何固定尺寸。我正在使用Bootstrap V5，并在代码中尝试了2个图像类。

我意识到我的代码可能包含一些未缴纳的项目和命令等加倍，但是它们是我尝试的所有事情。我问题的示例屏幕截图。

我唯一尚未完成的事情（如果我无法获得图像，这是我的最后一个选择在Divs内进行扩展）将为它们创建更多的断点和相应的CS。但是，该图像不会从其移动设备上溢出，并且似乎部分反应灵敏 - 因此，我不确定是否有必要。似乎应该有一个更简单的解决方案来解决我的尝试？也许不是。

非常感谢。

#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/[email protected]/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>
        <!-- container ends-->
      </div>
    </div>
    <!-- row ends-->
  </div>
  <!-- container ends-->
</section>

Answer 1

您将属性类设置2倍。

尝试＆lt; img src =“ public/img/kelvindalegold.png” alt =“ ...” class =“ img-fluid img-rexponsive”＆gt;