<img> expand to entire div with keeping ratio - html

Question

I have a gallery slider in bootstrap. It must be RWD so I must use eg. max-height.
The problem is that the images in this gallery can be different. They can be bigger/smaller - with different ratio.
In this example a .carousel div has height: 450px. To be RWD friendly I want use max-height, but images in this carousel must be 100% to entire div with keeping ratio. Even if some image will be overflowing outsdie this div (or conversely). On this case img must be centered vertically and horizontally (maybe with flexbox?).
When I do max-height the carousel will be jumping because photos can be bigger or smaller. When I set height to carousel she didn't jumping, but it isn't RWD option and some images can be smaller than div (check example below)
Here is example

Answer 1

Try using object-fit: cover.
These will keep your image ration no matter what size you set it. It sort of act like cropping the image. You can add object-position: center too to position your image on the center.
.carousel-inner > .item > img {
object-fit: cover;
object-position: center;
// then your height and/or width
}
Refer on these link for more info: https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

Answer 2

Your best bet is really to add your images as background images in your css you can either do this in the actual css stylesheet or just add a style tag to the .item itself. Then add your height and such to the .carousel .item instead of the entire carousel itself along with background position and background size then remove the image tag completely from your .item in your markup. In the following example I added the !Imporatant to the background size and background position. You can remove these if you are going to just state the background in the css stylesheet but if you want you can do somthething like put them in the html markup in a style tag like
<div class="item active" style="background:url('path-to-image');"></div>
If you do this you would need to keep the important statements in your css in order for this to work otherwise there is no need for them.
Here is a revised fiddle Fiddle Demo
So your css would look something like the following:
.carousel .item{
width: 100%;
height: 450px;
overflow: hidden;
background-position:center !Important;
background-size:cover !important;
}
.carousel .item:nth-of-type(1){
background:url('https://pixabay.com/static/uploads/photo/2014/03/29/09/17/cat-300572_960_720.jpg')
}
.carousel .item:nth-of-type(2){
background:url('https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-349976.png')
}
.carousel .item:nth-of-type(3){
background:url('https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-80082.jpg')
}
/* Indicators list style */
.article-slide .carousel-indicators {
width: auto;
white-space: nowrap;
margin: 0;
left: 50%;
transform: translate(-50%, -50%);
}
/* Indicators list style */
.article-slide .carousel-indicators li {
border: medium none;
border-radius: 0;
float: left;
height: 54px;
margin-bottom: 5px;
margin-left: 0;
margin-right: 5px !important;
margin-top: 0;
width: 100px;
}
/* Indicators images style */
.article-slide .carousel-indicators img {
border: 2px solid #FFFFFF;
float: left;
height: 54px;
left: 0;
width: 100px;
}
/* Indicators active image style */
.article-slide .carousel-indicators .active img {
border: 2px solid #428BCA;
opacity: 0.7;
}