Keep image centered in carousel when shrunk to mobile - carousel

Question

I'm trying to keep the carousel image centred when shrunk to mobile size but it either shrinks it by distorting it, retaining the height but squeezing the width in, or just shows the left side of the picture if I use absolute. I need it to display the centre of the picture full height, while just chopping off the edges. it also needs to retain the carousel-caption over the top of it. I've tried a couple of d-block or d-flex but nothing works.
Don't mind the frog stuff, it's just a place filler!
EDIT:
I've managed to keep the aspect ratio of the pic as it shrinks by changing the css to remove the height: 32rem when less than 950px. I still would like to retain the height of the image and to crop the edges as it shrinks though but can't find any way of doing it. Does it need to be in some sort of fixed container and use object-fit cover and let it crop? What container can I use inside the carousel container? I'm really new to this!
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-flex justify-content-center" src="Images/Kermit.JPEG" alt="kermit looking
christmassy with his hat on">
<div class="container">
<div class="carousel-caption text-start">
<h1>Got a frog fetish?</h1>
<p>You've come to the right place!</p>
<p><a class="btn btn-lg btn-primary" href="#">Click here to watch</a></p>
</div>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="Images/kermitsnow.JPEG" alt="kermit in the snow">
<div class="container">
<div class="carousel-caption">
<h1>Chilly frogs your fetish?</h1>
<p>Come see our videos of snow frogs</p>
<p><a class="btn btn-lg btn-primary" href="#">Click here to watch</a></p>
</div>
</div>
</div>
the css:
#media only screen and (max-width: 950px){
.carousel-item > img {
position: absolute;
max-width: 100%;
top: 0;
left: 0;
}
}
#media only screen and (min-width: 951px){
.carousel-item > img {
position: absolute;
max-width: 100%;
top: 0;
left: 0;
height: 32rem;
}
}

Answer 1

With Carousels the assumption is made that you have control over your images and thus can standardise on things like width and height -- I assume in this case that's not so (else you would just edit the images and crop them to all have the same height to width ratio at the very least).
The conundrum here is that centring is a function of the container the thing resides in, so in this case you'd need to wrap the <img> in a <div> and manipulate its CSS to centre it and limit its height with CSS max-height: 400px. But for images with heights larger than their widths you'd get centring, but with cropping to show only the top of the images.
One way to achieve a flexible image carousel is to use CSS background-image to control sizing and position. In your case I would nominate a height the carousel would operate in, e.g. 400px and then use a transparent 1x1 pixel to establish the image. You can then use CSS to manipulate the images with a background-image: url() CSS.
Try this HTML:
<div id="carouselExample1" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img id="img1" class="d-block w-100" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" height="400px">
<div class="container">
<div class="carousel-caption text-start">
<h1>Got a frog fetish?</h1>
<p>You've come to the right place!</p>
<p><a class="btn btn-lg btn-primary" href="#">Click here to watch</a></p>
</div>
</div>
</div>
<div class="carousel-item">
<img id="img2" class="d-block w-100" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" height="400px">
<div class="container">
<div class="carousel-caption">
<h1>Chilly frogs your fetish?</h1>
<p>Come see our videos of snow frogs</p>
<p><a class="btn btn-lg btn-primary" href="#">Click here to watch</a></p>
</div>
</div>
</div>
</div>
</div>
..with this CSS:
#img1, #img2 {
background-position: center;
Background-repeat: no-repeat;
background-size: cover;
/* ..OR..
background-size: contain;
background-color: #1f2227;
*/
}
#img1 {
background-image: url(https://placekitten.com/640/360)
}
#img2 {
background-image: url(https://placekitten.com/360/640)
}
(If you're using dynamic HTML generation then inject a style="backgoround-image:url(xxx)" attribute into the <img>.)
See this JSFiddle for an example.