CSS : calc()

The calc function is a great way to size your elements.

How it works:
Calc() operates with values of identical units, as well as with values of different units.
You can set calc() as a value of any sizing properties, and you can also use them for angles.

It can be a life-savior in situations where you need responsiveness.

For example, you can use it like this:

div {
height: calc(100vw / 10);
width: cacl(100vw / 10);

*NB: “vw” stands for Viewpot Width. 100vw = total width of your viewport.*

What this code does is that it gives you a responsive square div, the size of which is 1/10 of the viewport width. A square it is, a square it will be.

Here is an example of how I used it: a mosaic of the Eye of Sauron!

EDIT: Someone did it better than me, using several columns per row and Bootstrap4. See Jerome Legrand’s solution here.

a mosaic representation of the Eye of Sauron
an exercise: keep the aspect ratio of the image whatever the screen size

Published by

Aurelie Bayre

Hello! My name is Aurelie Bayre and I am a webdeveloper living in France.

Leave a Reply

Your email address will not be published. Required fields are marked *


This site uses Akismet to reduce spam. Learn how your comment data is processed.