My issue involves getting an image to resize and stay within its designated div. However, the image continues to spill over onto the div below when I adjust the browser size or view it on my laptop.
I have not set any fixed dimensions for the image. I am utilizing Bootstrap v5 and have tried using 2 different image classes in the code.
It is possible that my code contains unnecessary elements and duplicate commands, but everything I have attempted so far has been unsuccessful. I have included a screenshot illustrating my problem.
If I cannot get the image to scale properly within the divs, I may resort to creating additional breakpoints and corresponding CSS rules as a last resort. However, the image does not overflow from its containers on mobile devices and appears to be partially responsive - which makes me question if this drastic measure is truly necessary. It seems like there should be a simpler solution to my dilemma, but perhaps not.
Thank you in advance.
#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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="593b36362d2a2d2b3829196c7768776a">[email protected]</a>/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>