Important note:

This version is deprecated and will not be supported from 1 May 2018. A new version is available at https://stas-melnikov.ru/books/hctasks/tasks/the-stub-block-with-percent-units/

The stub block with the percentage units

Demo: https://codepen.io/melnik909/pen/KyomyE

Task description

Pretty often website content can ‘jumps’ after some image have been loaded. This happens because image block height equals 0 for the reason that browser cannot define image dimensions while image still loading.

If we add an empty block with the same dimensions as our image, we can solve that problem. Therefore when browser loads the page, this block have been on the image’s place already. And so the block’s dimensions are the same, the content wouldn’t jump.

Well, let's go back to the task. I have created the HTML and added a part of CSS. If you open the page you can see that parent block changes it’s height while page is loading.

You have to prevent this through setting sizes of the stub block equal to image’s sizes. Besides, it is important that the width and the height of the block should stay equal the width and the height of the image even if viewport resizes. And the image itself should be loaded above this stub block. You should also notice that the picture has 1920px width and 1080px height.

The height of the parent block with border should be defined before the image has been loaded as a result.

Solution

You need to figure out, how the stub block has been created. I added following code into the CSS:

.post__preview:before{
  content: "";
  display: block;
  background-color: rgba(20, 20, 20, .15);
}

Also you can check it in the web inspector:

Now, if you glimpse at the block sizes you can notice that it has the width but doesn't have the height. Let's correct it.

The very first idea is to set block height with some pixel value. But this way is completely wrong because in this case the block’s sizes wouldn't repeat the image sizes if viewport resizes.

The next possible way is percentage using. But as we remember, browser calculates block's height according the block's content, so if we set height : 100% it doesn't work.

There are two things can help us to find solution: first one is that browser counts element's height including padding property. And the second one is the fact that padding-top and padding-bottom set in percent are calculated by element width in browser.

Now, we can calculate padding-bottom property for our block. As it has given in the task, the block should have the same size as the image. The image is 1920px width and 1080px height. So, let's calculate padding-top with proportion:

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

here Wi is image width and Hi is image height.

Now we can add this padding-top in our CSS.

.post__preview:before{
  content: "";
  display: block;
  background-color: rgba(20, 20, 20, .15);
  padding-top: 56.25%;
}

And the last thing, we need to place the image above the stub block.

.post__preview{
  position: relative;
}

.post__img{
  position: absolute;
  top: 0;
  left: 0;
}


Why you need to support the project

I want to share my knowledge with you but creating posts takes a long time. Therefore I'm looking for subscribers who will financially support me. Your money will go towards the development of the HCTask project and creating my book about HTML and CSS. Together we can do it. Thank you!

PayPal: https://www.paypal.me/melnik909

results matching ""

    No results matching ""