The auto value
That word, auto, it sounds smart. Do you think so? :D
It’s our nature to love something which is automatic. I love automatic dishwasher,
automatic coffee machine, automatic cat feeder, etc…. And here, in CSS, we have
the auto value. This value will tell web browsers to automatically calculate
suitable values for our CSS properties.
Let’s assume that we have 3 images and their actual sizes are 1920x1080, 1600x1000
and 1000x1000. When we embed these images to a webpage, a clever move is specifying
their widths using %, some thing like width: 100%; to make the images fit into
various screen sizes. But, wait! How about height?
These images have different aspect ratios. So, to keep them not stretched, we
may have to specify their heights one by one. Nope, we won’t do that. This is
the point where we need help from the auto value.
HTML:
CSS:
Result:
See the Pen Auto by Kei Nart (@codenart) on CodePen.
Is that a magic? We don’t even have to make any calculation. Web browsers automatically take care of the complex task and maintain those images’ aspect ratio. I’ve no idea why web browsers know exactly what we want. :D
Note that the auto value can be used with various CSS properties and we’ll meet
it again and again.
Minimum and maximum values
Besides the width and height properties that we’ve already known, CSS also offer
some related properties like min-width, max-width, min-height and max-height.
These properties are used to create some constraints that help us to make sure
components will look good in any situation.
Let’s say, the common line length for good reading experience is maximum 90
characters or less; Combine with common font-size (around 16-18px) will give
the result in ~700-800px. So, You may want to make sure your blog/website will
use maximum line length as 800px. This can be
done by using max-width property:
.post { max-width: 800px }
So, your blog post will display as fluid a container in small screen. But when people see it in a large display (let’s say a 21” full HD display), those content will stay at 800px wide and provide a good reading experience. It’s cool, isn’t it?
These properties are also used in media query syntax which allows us to write
CSS code for each certain screen sizes. We’ll meet them in a few next tutorials.
Just try those properties around in your sample document to get familiar with
them. This preparation will benefit you in various way when you start creating
responsive components. As usual, here are reference links:
In the next tutorial, we’ll meet some new amazing tools which are used to size up elements and position them in a different way of thinking.