CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbootstrap-4
luisfer
luisfer

Reputation: 2120

Resizing <img> in Bootstrap carousel to parent element in CSS

I have a dynamic page that has a carousel. I have no control of the images, because they are uploaded by the user. There are some guidelines, but I can't be sure that they are gonna follow them.

So, in my development tests, I have three images: a 100x100, a 2800x1500 and a 600x400

I want the carousel be in the middle of the page, and be responsive. I have no problem with that if I have more or less consistent images.

...
<div class="carousel-item active">
    <div class="carousel-img">
        <img src="img1.png">
    </div>
</div>
<div class="carousel-item">
    <div class="carousel-img">
        <img src="img2.png">
    </div>
</div>
<div class="carousel-item">
    <div class="carousel-img">
        <img src="img3.png">
    </div>
</div>
...

The CSS for "carousel-img" currently (I have tried lots of combinations, and nothing seems to work) is:

.carousel-img {
  height: 400px;
  width: 100%;
  overflow: hidden;
}

.carousel-img img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

Now, the very large image, works as intended. It resizes not using more than 400px vertically. The problem is with the other two images. The smallest one, resizes from 100px to 400px vertically and up to around 400px vertically, it doesn't fills up horizontally, despite the 100%.

So how can I tell CSS to resize the images (without changing aspect ratio) to use 100% of the parent container. Let me try to explain better: if the carousel is inside a <div class="col-md-6">, it should use all the width and up to 400px.

Edit

Please accept my apologies to make everyone waste their time. There's no error in my original code. But there was a previous DIV before the carousel that read:

<div class="row justify-content-center">

I thought this might be no problem since it is intended to center the following DIVs, I don't know why but this justify-content-center prevented the images to resize appropriately, when I removed it, the images inside the carousel started working as intended.

Thank you very much to all who offered to help, today I learned something different.

Upvotes: 1

Views: 1047

Answers (1)

Siavas
Siavas

Reputation: 5090

Find a working snippet in this jsfiddle – this is using the carousel with indicators provided in the documentation and the image sizes you are considering.

The only changes you have to make is to remove your carousel-img div from your HTML, and change the .carousel-img rulesets in CSS to be applied to carousel-item instead:

...
<div class="carousel-item active">
    <img src="img1.png">
</div>
<div class="carousel-item">
    <img src="img2.png">
</div>
<div class="carousel-item">
    <div class="carousel-img">
        <img src="img3.png">
    </div>
</div>
...

And the CSS: 

.carousel-item {
  height: 400px;
  width: 100%;
  overflow: hidden;
}

.carousel-item img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

Have also removed the active class from all your items except the first as that would cause problems for Bootstrap JS to iterate through the slides.

You would have already got a first from me for using object-fit: cover from the start!

Upvotes: 1

Related Questions