Placeholder for image using padding-top and percent

When we are interviewed, we are often asked questions on the layout. Often they boil down to enumerating the values ​​of the display property or how to center elements. It frankly got me, and I wanted to invent my own tasks, with the help of which you can test the designer's knowledge, and not how he jagged the values ​​of the properties.

Task Description

Often, when I read articles on the Internet, I encounter the following problem: the text starts jumping when the image is loaded.

One solution to this problem is to add a placeholder to the image, in which the ratio of width and height will repeat the aspect ratio of the image.

I will start its implementation with markup:

<div class="post"> <img src="example.jpg" class="post__img" alt="   "> </div> 

To set dimensions for a placeholder, you need to know the aspect ratio of the image. For example, I will use an image of 1920x1080px.

But if you display an image of this size, then on most screens it will be displayed with horizontal scrolling. Therefore, I will set the .post element to a maximum width of 640px, and the image width will adjust to it.

 .post { max-width: 640px; } .post__img { max-width: 100%; } 

I will add a placeholder to the page using the before pseudo-element. You also need to remember to place the image on top of it.

 .post { max-width: 640px; position: relative; } .post::before { content: ""; } .post__img { max-width: 100%; position: absolute; top: 0; left: 0; } 

Now you need the width of the placeholder to repeat the width of the image. Earlier, I made the image take up 100% of the width of the parent .post element. I will do the same for the pseudo-element before by adding display: block to it.

 .post { max-width: 640px; position: relative; } .post::before { content: ""; display: block; } .post__img { max-width: 100%; position: absolute; top: 0; left: 0; } 

Friends, on this I finished my part of the work, and yours remained. You need to calculate the height of the pseudo-element before.

To do this, use the padding-top property with a percentage value. To do this correctly, you need to know the percent calculation feature of the padding-top property. And also remember that the image size is 1920x1080px.

 .post { max-width: 640px; position: relative; } .post::before { content: ""; display: block; /*    padding-top    % */ } .post__img { max-width: 100%; position: absolute; top: 0; left: 0; } 

I hope that you try to solve this problem yourself. But if difficulties arise, below is my solution.

Decision

The padding-top and padding-bottom properties have one very useful feature. If for them to set the values ​​in percent, they will be calculated on the width of the parent block.

Accordingly, knowing this and remembering the dimensions of the image (1920x1080px), you can calculate the padding-top for a placeholder using the proportion:

 padding-top = ( * 100%) /  = (1080 * 100% ) / 1920 = 56.25% 

where shi and vi are the width and height of the image.

It remains to add the value for padding-top:

 .post { max-width: 640px; position: relative; } .post::before { content: ""; display: block; padding-top: 56.25%; } .post__img { max-width: 100%; position: absolute; top: 0; left: 0; }