图像不会根据它所在的容器调整大小。我做错了什么？

Question

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

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

我意识到我的代码可能包含一些不需要的项目和命令加倍等，但它们都是我尝试过但无济于事的事情。 我的问题的示例屏幕截图。

我唯一还没有做的事情（如果我不能让图像在 div 中缩放，这是我的最后一个选择）将创建更多的断点和相应的 CSS 。 但是，图像不会从移动设备上的 div 中溢出，并且似乎部分具有响应性 - 所以我不确定这是否有必要。 似乎应该有一个更简单的解决方案来解决我正在尝试的问题？ 也许不是。

非常感谢。

 #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> < -- container ends--> </div> </div> < -- row ends--> </div> < -- container ends--> </section>

Answer 1

您设置了 2 倍的属性 class。

尝试使用<img src="public/img/kelvindalegold.png" alt="..." class="img-fluid img-responsive">