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.
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!
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?
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.
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.
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