My carousel images are too big

HTML-CSS
#1

Hi there
I’m having problems getting the images for my carousel to fit the full screen exactly. They do cover the width of my screen but the height’s too, er, tall? I have to scroll down a little to see the bottom of the image.

The images are all w:1500 by h:1200. My screen is 1440 by 900. Do I have to crop the images to match my screen?? lol

I’m using Bootstrap 4 and took the code from the Bootstrap website.

Here’s my html:

<div id="carouselControls" class="carousel slide" data-ride="carousel" >
      <div id="home" class="carousel-inner">
        <div class="carousel-item active"><img class="d-block w-100" src="http://res.cloudinary.com..." alt="Laptop"></div>
        <div class="carousel-item item"><img class="d-block w-100" src="http://res.cloudinary.com..." alt="Code"></div>
        <div class="carousel-item item"><img class="d-block w-100" src="http://res.cloudinary.com..." alt="Desk"></div>
        <div class="carousel-item item"><img class="d-block w-100" src="http://res.cloudinary.com..." alt="City"></div>
        <div class="carousel-item item"><img class="d-block w-100" src="http://res.cloudinary.com..." alt="Mountains"></div>
      </div><!-- carousel-inner -->
      <a class="carousel-control-prev" href="#carouselControls" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="carousel-control-next" href="#carouselControls" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div><!-- carouselControls-->

Why isn’t “w-100” in the html adjusting the size accordingly?

In my css, there’s this

body {
padding-top: 50px;
}

The rest of my css affect other elements like headings which I don’t think are causing the problem. I’ve tried background: cover but this doesn’t seem to work. Any advice is appreciated. Many thanks!

#2

Instead of physically cropping the images, you can set a height on your carousel item.

.carousel-inner > .item {
   height: 400px;
}

This will still keep the left and right navigation arrows centered vertically on your carousel.

1 Like
#3

Thanks for your prompt reply! Okay, I’ve just tried that. It does reduce the height but at 400px, it doesn’t go all the way down to the bottom edge of the screen. When I set it at 780px, however, it just about touches it.
So… to solve this problem, do we just do a trial and error and see which height is best?

1 Like
#4

Yes, just use the px height that will look good on your page.

it doesn’t go all the way down to the bottom edge of the screen

I didn’t know you’re trying to cover the whole screen. (thus my 400px example)

A little more involved solution is using JS to detect the user’s browser screen height, and then injecting that height into a class that affects your .item. That way, whatever the user’s browser height, you’ll always occupy it full screen height.

1 Like
#5

Instead of px look into “css vh & vw” to cover the entire view port.

1 Like
#6

Because everyone has different screen heights, you will need to go with the solution @owel mentioned if you want the entire screen height for the carousel images.

Actually, if you go with @wmooney1984’s suggestion it could work also.

img {
  height: 100vh;
}
1 Like
#7

Thank you, everyone! I’ll try all the suggestions.

#8

If you do not have a header div on top, yes, you can use 100vh to cover the entire screen.

But if you have a div navigation header on top (with a certain px height), using 100vh will extend your carousel’s image/photo height past the bottom of the screen/browser.

So really, if you want the carousel occupying the whole screen, plus show your navigation header on top, you’ll need to get the screen height minus the navigation header height, and resulting answer should be the set height for your carousel .item

2 Likes
#9

It works fine but it creates second problem, on smaller device , it covers the whole screen so it all looks stretched out on mobile phone screen.

#10

just write these code in the style block

.carousel {

height:360px;

}

.carousel-inner &gt; .item &gt; img {

height:360px;

object-fit: contain;

}
#11

thanks men this coment help

#12