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!