CSS Max-Width and Max-Height Properties
If you’ve landed on this blog, then I’m presuming you know a little about CSS and have used the height and width properties quite a bit. What if you’ve began to fiddle with responsive web design and the simple width/height properties just don’t cut it? Let me introduce you to the max-width/max-height properties.
Like the width properties, max-width and max-height accept unit values, however the maximise size for an element is set rather than the fixed size. Let’s take a look at an example:
div.parent {
width: 500px;
}
div.parent div {
width: 20%;
height: 20%;
max-width: 200px;
max-height: 200px;
}
In the CSS above, notice the percentage values set for the child DIV elements of div.parent. What this is saying is the width/height value of 20% will be calculated based on the size of the parent element - in this case, div.parent. In saying this, there’s also a max-width/max-height value of 200px, meaning that even if the parent element width increases to say 10000px, the child DIV elements will only ever get to a maximum of 200px wide.
<div class="parent">
<div>Some content herediv>
div>
Lastly, if the element div.parent is set to 500px wide, all child DIV elements will be 20% in size of this, being 100px, and will never exceed 200px.
Simple!
