Img full width of page and screen height

[multichild]

I cant believe I cant work this out, but I have an image placed inside bootstrap carousel, and I need it to be full width of the screen and stick to only being the full height of the screen, but its just not working.

<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://www.accend4web.co.uk/DentalPB/wp-content/uploads/2020/07/Referring-Dentists-Large-scaled.jpg">
<div class="carousel-caption d-none d-md-block">
<h5>...</h5>
<span>put some text in here 1</span>
<div class="sliderFooter">short text statement</div>
</div>
</div>

Link - My website

[PaulOB]

There are a couple of concepts to understand before you can attempt this.

The first is that you can’t use height:100% unless you have an unbroken chain of parents all with height:100% defined all the way back to and including the html element.

The second thing to consider in your example is even if you did manage 100% height for the carousel then combined with the height of the header the carousel would extend some distance below the fold causing a vertical scrollbar when none was needed and cutting off some of the image.

For your use case your options are to define the carousel height using vh which need no unbroken chain of parents and then to use calc to subtract the header height from the height:100vh.

e.g.

calc(100vh - 84px)

The 84px is of course a magic number as it only matches your header in one situation and will not cater if text wraps or you have reduced the size somewhere n your media queries. However it is your only choice in this situation without revising all the html.

With the 100vh in place the image now has the space to cover the viewport but in order to do that you have to set the image width to 100% and the image height to 100%. This will squish the image and again the only solution for a full height image at all screen heights is to use object-fit:cover on the image (modern browser only) and this will make sure the image fills the viewport but maintains aspect ratio. This will result in some cropping of the image so make sure that images you use are suitable for the task in hand.

This really is the only way to handle this if you want viewport high images.

Here is the extra code needed.

.carousel{height:calc(100vh - 84px);}
.carousel-item img{width:100%;height:100vh;object-fit:cover;}

This will result in these 2 screenshots for large screen and small screen.

Hope that answers the question

[multichild]

Hi Paul, good to hear from you again, and thanks that was a good read.

I added the two lines, and ended up with a bit of an unusual thing, where there is 2 scrollbars, and the image starts out as wide then jumps to a smaller width.

I fixed the inner scrollbar by adding position: absolute to carousel class

[PaulOB]

Sorry there was a typo in my code and you also seem to have an empty p tag with a margin-bottom under the image adding to the height.

Try this:

.carousel{height:calc(100vh - 84px);position:relative;}
.carousel-item img{width:100%;height:calc(100vh - 84px);object-fit:cover;display:block;}

.carousel-item img + p{display:none;}

Remove the position:absolute you added

[multichild]

@PaulOB

.carousel{height:calc(100vh - 84px);position:relative;}
.carousel-item img{width:100%;height:calc(100vh - 84px);object-fit:cover;display:block;}

.carousel-item img + p{display:none;}

Awesome, that works really well, luckily I checked in Firefox though, as you get a problem where the image starts as big and the right size, then when it stops it goes to a smaller version, id say not set as cover.

[PaulOB]

@PaulOB

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

Looks like a bug in Firefox where it can’t work out the width of a flex item.

Try putting width:100vw on the image instead of the 100%. (100vw is usually a pain because it doesn’t take into account the scrollbar taking up space but as you are hiding the overflow it should be ok).

.carousel-item img{width:100vw;height:calc(100vh - 84px);object-fit:cover;display:block;}

[multichild]

Firefox is a pain isnt it, works perfectly in Chrome again, but now get a double scrollbar.

Thanks for helping Paul.

p.s actually it looks a similar problem in chrome now

[PaulOB]

@multichild

p.s actually it looks a similar problem in chrome now

I think some of the measurements have got mixed up in the to-ing and fro-ing.

Can you revise and use the following (clear cache etc).

.carousel{height:calc(100vh - 84px);position:relative;}
.carousel-item img{width:100vw;height:calc(100vh - 84px);object-fit:cover;display:block;}
.carousel-item img + p{display:none;}
.carousel-item,.carousel {overflow:hidden;}

I’m on a mac at the moment which doesn’t show scrollbars in the normal way and even when they do appear they don’t take up space. If the above is still not working in Firefox and Chrome then I’ll fire the pc up tomorrow and have another go.

[Erik_J]

@PaulOB

If the above is still not working in Firefox and Chrome…

It works in Firerfox 77 and Chrome/Chromium 83, both in Linux.

[multichild]

I totally get now why I couldnt work this out before, its far more complicated than I imagined it would be.

I have tested it in Chrome and Firefox, and I’m just passing on an observation because I am very grateful, is that its still scrolling, and in Chrome there seems to be 2 scrollbars.

Its far far closer than I had it anyway, thanks again Paul.

[PaulOB]

@multichild

and I’m just passing on an observation because I am very grateful, is that its still scrolling, and in Chrom

It’s because you used -82px instead of the -84px that i used above. I get no scrollbars with those changes in place.

[PaulOB]

Just checked on my PC and there is no scroll in Chrome or Firefox on the slider with my code above.

There is however a scrollbar on the html element from your default settings.

overflow-y: scroll;

html {
	font-size: 62.5%;
	/* Corrects text resizing oddly in IE6/7 when body font-size is set using em units http://clagnut.com/blog/348/#c790 */
	overflow-y: scroll;
	/* Keeps page centered in all browsers regardless of content height */
	-webkit-text-size-adjust: 100%;
	/* Prevents iOS text size adjust after orientation change, without disabling user zoom */
	-ms-text-size-adjust: 100%;
	/* www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/ */
}

That has nothing to do with the slider and you will need to use html{overflow:auto} if you want that removed.