I am inserting a picture into a bootstrap carousel; but the image is too zoomed in. I have attached a picture of the original image and the output on my screen.Original imageCentered imageimage with height set to 30vh
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Equipment</title>
<!-- Adding link for Bootstrap components -->
<link href="/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<link rel="stylesheet" href="/ACT/CSS/style.css">
</head>
<body class="body-1">
<div class="container">
<div class="row">
<div class="col-sm-1">
</div>
<div class="col-sm-9">
<h2>Equipment</h2>
<div id="carouselExample" class="carousel carousel slide">
<div class="carousel-indicators">
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="/ACT/Images/IMG_1316.JPEG" class="d-block w-100" alt="Biesse Rover A CNC">
<div class="carousel-caption d-none d-md-block">
<h5>Biesse RoverA CNC</h5>
</div>
</div>
<button class="carousel-control-prev btn-outline-dark" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next btn-outline-dark" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<div class="list col-xs-12">
</div>
</div>
</div>
<div class="col-sm-2">
</div>
</div>
</div>
<script src="/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
<script src="/JS/index.js"></script>
</body>
</html>
CSS:
.carousel-item>img{
position: absolute;
top:50%;
left:50%;
transform: translate(-75%,-25%);
}
type here
I have tried setting the width of the image to 100% to get it to scale down, but even when I add "!important", it does not change the image. I want the image to be responsive, but if I alter the height, the bottom of the image just disappears rather than shrinking the entire image as can be seen in the image above.
I can get it to do what I want with a lot of trial and error using the css below, but it only is styled correctly for particular screen size ranges, so I will have to use media queries to correct the issues. Is there a better way?
.carousel-item>img{
position: absolute;
top:50%;
left:50%;
transform: translate(-110%,-25%);
width:40% !important;
}