CSS

How To Set Max Height and Width With CSS

We know that the height and width properties in CSS allow us to set the size of an element, like an image or a div, but you may wish to use additional constraints using CSS to stop elements getting too big.

You can do this with the max-height and max-width properties where the ‘max’ part of the property name is short for ‘maximum’.

        max-height: 
        max-width: 
      

As you may have guessed, the max-height property in CSS sets the maximum height of an element.

And let me guess, the max-width property sets the maximum width?

Yes! Nice and easy to remember right?

How is this different from just setting the height and width like we did before?

As this code sets the maximum size, the element could be smaller than the values you set but can’t get any bigger.

This can be useful when making sure your website looks good on big screens, like laptops, and small screens, like phones.

Can you show me an example?

Preferably with a picture of me in a tree.

I’ll make you a deal, two examples and one of which can be about you in a tree.

You drive a hard bargain.

Divs

For this first example, let’s look at how a div might resize across different screens.

Let’s say you had a small, salmon coloured div which used the following CSS to set its height and width.

        height: 300px;
        width: 1000px;
      

On a laptop, this looks fine but on a phone the div might go off the edge of the screen; which we definitely don’t want as there is hopefully useful content in the div.

We can use the max-width property to ensure this doesn’t happen. On small screens, we want the width of this div to be as wide as the screen but no wider and on large screens we want the div to be limited to 1000px wide.

So our code becomes this:

        height: 300px;
        width: 1000px;
        max-width: 100%;
      

With the width property set to 1000px, our div will normally be 1000px wide but because of the additional max-width property the div cannot be bigger than 100% of the width of its parent.

This code also works in exactly the same way.

        height: 300px;
        width: 100%;
        max-width: 1000px;
      

Images

Now for the part Aria has been waiting for. Let’s say you have a tall image of a cat in a tree and you use the following CSS:

        height: auto;
        width: 100%;
      

This looks great on phones because the screen is tall.

But on laptops you can’t see the whole image.

You can't see all of my face!

Or my toebeans!

Click here to open a new tab which will show this image. Change the size of your screen and look at how the image changes. Remember, the image will always be as wide as the browser window, because width is set to 100%.

So what do you think we need to do?

Well, we don’t want the image to be taller than the size of the screen.

That’s right.

So let’s use the max-height property to do this.

But what do we set it to? I don’t know how tall the screen is in pixels.

Especially if this has to work on phones and laptops.

Remember, pixels aren’t your only option; you can use percentages or even viewheight.

Now our CSS looks like this:

        width: 100%;
        max-height: 100vh;
      

With this new line of CSS, the image will be limited to the height of the screen as we have set the maximum to 100% of the view height. On our phone screen, there was no issue so our website is unchanged.

But look what has happened on our laptop screen.

Wow I look muscular!

And I’ve not even been working out!

No.

The image has been squashed. Like it’s been sat on.

Oh.

So, what has happened is that the image has been limited to the height of the screen but as the width is set to 100% the picture always takes up the full width of the screen. The result is a squashed looking photo.

Remember when we looked at width we talked about aspect ratio which is how tall the picture is compared to its width. Here, because we’ve set both height and width, the aspect ratio is being ignored and the photo looks like someone has sat on it.

So, no Aria has not suddenly gotten all muscular from her naps.

The issue is that we are forcing the picture to take up the whole width of the screen, because width is set to 100%. So the way to fix this is to change our code from:

        width: 100%;
        max-height: 100vh;
      

To this:

        max-width: 100%;
        max-height: 100vh;
      

As max-width and max-height set the maximum size, your HTML elements can be smaller and so the result is this:

Click here to see this code working. Change the size of your browser window and see how the image changes size.