Published on | Prototyping: From UX to Front End — Medium Afopefoluwa Ojo

I should tell you how I spent my night; how I spent my night loving Lorde after listening, once again, to her album, melodrama. Realising that she, this whole beautiful being, is in fact, my aesthetic, my type of person, my blood. I spent my night listening to music on speakers and procrastinating writing this thing about the difference between width and max-width. But here we are. Experiencing this together.

lowkey lorde is the only person i need to make by friend list complete

— @Fope_

A block-level element is like gas, it takes up the size of whatever container (think: parent element) it is put in, as far as it can, it stretches right and left to fill up the parent element. In the case of images, though, it would take up all the space that it can, only constrained by its actual natural width and height. So that if you put an image of natural width 1200px in a div, it is bound to take up the whole 1200px that it naturally is, regardless of whether the parent element is larger or smaller than the image. So that if the image is larger than the container in which it is put, it would exceed the parent div and if the image is larger than the browser window, the browser adds a horizontal scroller, which is ew.

On taking back control, God forbid that I’m here to play the role of motivational speaker telling you how much control over your life you have because quite frankly, that’s not my business. But while we’re in the business of block elements, and in this case, images, I’m here to tell you that you have all control, that you decide the pace, natural width or not. A good way to be in control of your element, is by setting the element to a fixed width. For example:

img {
width: 600px;}

This simply means that the image should remain 600px all the time regardless of whatever else is going on around it. Regardless of whether the parent element or browser window is bigger or smaller than 600px. It would always remain 600px. But wouldn’t that be ugly if we have an image that decides to remain 600px, even if the browser size is reduced to say, 320px? Yes it’s really ugly. So back to taking back control: max-width gives us even more control.

Max-width tells the browser this:

Dear browser,

No matter the circumstances involved, kindly do not exceed this width that I wrote here. I mean, you can probably be less than my allocated width, when you need to, but never be more than this width that I’ve put right here. Don’t even consider it.

Yours truly,
max-width.

So if we have this:

img {
width: 100%;
max-width:700px;}

This says that the fixed width of the image, should take up the entire size of the parent element — if the width of the parent element is explicitly stated, — all hundred percent of it, yet the image should never exceed 700px. It means that the image can be less than 700px, if that suits its situation better (e.g smaller window size) but it should never be more. So there are two conditions here, that the width of the image can be 100% of the parent element if it wants to but it must not never be more than 700px.

This is a simple way to put it: if the element would render wider than the max-width says it should be, then the max-width property wins over the width property. But if it would render less than the max-width says, then the width property wins. In mathematical terms:

if width > max-width; let the browser use max-width.
if width < max-width; let the browser use width.

The example above also takes into consideration the window size, so that for smaller window sizes, like that of a mobile screen, the image resizes to take a smaller size that would naturally fill into the smaller screen. Its main caveat being that it would never exceed a stated size, but it could be less than stated size, depending on the size of the window browser. This means that regardless of whether the parent element is larger or smaller, the width of the element resizes to fit the smaller size, but is never more than width set by the max-width property.

Here’s a video, showing a practical example of how max-width works using the example stated above:

<a href="https://medium.com/media/90ae915f21c867176911ebc512631e78/href">https://medium.com/media/90ae915f21c867176911ebc512631e78/href</a>

Thank you!

PS: [also check this: graceland (afope.github.io/graceland) — so i designed another poem for my experimental project — expressions in three dimensions — using the three front end programming languages (html, css, and javascript) the first poem i designed for this project had actual three dimensional shapes, but this one approaches the idea of three dimensional in a different way. experience it with a desktop and you get music as a bonus. the poem is about conversations i’ve had with my dad, and conversations i’ve had with myself, and it’s influenced by grace paley’s short story titled ‘my father addresses me on the facts of old age.’ see the full poem by clicking the link in my bio 💛]

What, even, is the difference between width and max-width? was originally published in prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

What, even, is the difference between width and max-width?

Cool stuff, every week

More Articles