Difficulty getting total of image and <h1> and <nav> divs to fill responsive viewport

HTML & CSS
1

Hi,

I have for months been going round in circles with this so the time has come to ask for help. I suspect that Paul OB will nail it straight away and explain it to me in words of one syllable that I will understand.

I have a very simple page, with an h1 at the top then an image and eblow that a nav div. I want the whole page to fill the height of the viewport. I want the image to have it’s aspect ratio preserved and in order to fit I want it’s height to be such that along with the h1 and nav it just fills the height of the viewport. It took me a while to be able to write out in English what I wanted.

I think this codepen shows where I have got to.

I tried many many many different things, going away from it and returning later, for 2-3 months!

I have tried to avoid “magic numbers”.

I have tried creating a new div and making the image the background but this wouold only display the image if I had some text in the div.

I must be missing something simple but fundmental. Any help, pointers/guidance gratefully received.

Thank you

2

OP here again - I am aware that my HTML is invalid as I haven’t specified a width and height in the img tag and would be grateful for what I should do re this. Thank you.

3

Well lets start with a very basic one that popped up as soon as I loaded your codepen:

calc is very specific about its spacing.

main {
  height: calc(100vh-82px);

is invalid. You have to have spaces around the -.

main {
  height: calc(100vh - 82px);
1 Like
4

Aha! Thank you

5

This is where Paul will do it better than me, i am 100% sure, but :wink:

Everything in this page is inside Main. so i’m going to pull this…

body{
  display: flex;
  flex-direction: column;

}

and stick it into main.

Great, now my picture is gigantic. Let’s constrain it a bit…wrap it in a div…

    <div>
<img src="https://picsum.photos/400/300"> 
    </div>

but now we’re back where we started. Let’s use that flexing we’ve got…

div {
flex: 1
}

Now my div’s the right size. But the picture isn’t filling the div. Object-fit is great, but it is usually about fitting big things in small boxes, not the other way around.

This is where Paul will definitely do things better than me, but I found this works up until the point that the window gets so small that the image forces the main container to break (IE: 400px wide)

img{
	display: block;
  height: 100%;
  max-width: 100%;
}
2 Likes
6

I’m not at a computer today so can’t offer code but there are a few logic errors in your code.

First of all get rid of the flex on the body as that just confuses things.

Set a page wrapper (you have main as a page wrapper but that’s not semantically correct). I would use a whole page container and set it to min-height:100vh (no need for magic numbers using calc and do not use height). Set it to flex and column direction.

Then have a header, a main element and a footer element. (3 separate elements)

Then just set main to flex :1 0 0 and that will make main fill all the space available apart from the header and footer.

You could then just put the image as a background to main and use background size cover. You can’t use contain as that will not always fill the height.

You could use an image in the html instead but once again you would need cover and a width and height of 100%.

If you need the whole of the image to show without being cropped as cover would do then you’d need contain but that means it will not fit width and height at the same time as the viewport is not the same aspect ratio as an image. That’s not a limitation of. CSS but just obeying the laws of the universe :slight_smile:

I’ll put up a demo when I get home tonight if the above doesn’t make sense. :slight_smile:

2 Likes
7

Excellent reply, as ever - thank you. I think I understand it all - very clearly explained. I will have a go at that but I may not be able to until tomorrow. Thank you so much.

1 Like
8

I think you more or less said the same as me apart from a small detail. :slight_smile:

If you set the image to height:100% then the width must be set to auto or the aspect ratio is lost. This may indeed mean the image is miles too wide for the viewport if it is a landscape type image. A max width would break the aspect ratio when it comes into effect. If all the images are portrait size then it should be ok at most sizes.

There is no solution other than using contain or cover to crop or restrain dimensions.

1 Like
9

Using the image as a background to main -

This gives me the behaviour I was looking for - thank you so much.

10

Doh!

I realised that this page will be one of several linking from one to the other, each with a different picture. So I will need to use the img tag in html. I have tried doing this following your advice Paul but I get scroll bars when the viewport height gets below a certain size.

I think the answer lies in your reply somewhere but I can’t quite get it right. I don’t want the image to be cropped. I want the aspect ratio to be maintained. But as the viewport height shrinks I want the image height to be shrunk. I realise, of course, as you point out that the image width will then no longer fill the viewport width - I accept that that is physics/geometry.

thank you again

11

The image would need to be height:100% and width :auto. That’s the only way to maintain the height and keep the aspect ratio.

1 Like
12

No, you don’t. Just add a class to your main on each and set the background on each class to those different photos. Easy peasy.

3 Likes
13

I think it is, lines 20 and 21 in the CSS?

14

It’s not in any of the css that you posted?

I’m still on mobile so may have miss it but I couldn’t see you used the code I suggested.

The code above is using calc which you don’t need either especially in the middle of the page?

15

I’ve probably messed up the links or the forking. I will look into it.

16

Isn’t it there on lines 20 and 21 on the codepen in post #10 in this thread?

18

Ah. Clever.

1 Like
19

It’s there now:) It must have been cache issue on my mobile.

I would do as Dave said and just use a class to set up different images as required unless you are dynamically loading the images.

You might want to center the image with background-position:50% 50%; to make it look better.

e.g.

main {
  flex: 1 0 0;
  padding: 0 30px;
  background-color: var(--pageBackground);
  border: solid green 10px;
  background: url("https://picsum.photos/400/300");
  background-size: contain;
  background-repeat: no-repeat;
  background-position:50% 50%;
}
1 Like
20

I’m getting a vertical scroll bar when the viewport height drops below a certain level?

21

If you are talking about when using a real image then you need to do it like this.

The image is placed absolutely in relation to main and will not cause a scrollbar.

1 Like