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:

<divclass="post"><imgsrc="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;  
}