HTML and CSS tips #16 "How to stop content jumping when images load"

twitter logo github logo ・1 min read

You can use the padding property and percentage units to stop page's jumping when media content, such as images or video, loads. For example, if the image resolution 1920x1080 the padding property value will calculate in such a way:

padding-top = (Hi * 100%) / Wi = (1080 * 100% ) / 1920 = 56.25%
<div class="post">
  <img src="example.jpg" class="post__img" alt="some alt">
</div>
.post {
  position: relative;
}

.post::before {
  content: "";
  display: block;
  padding-top: 56.25%;
}

.post__img {
  max-width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

P.S: I share my experience with my Linkedin subscribers. Are you interested? Join to us! 👉 https://www.linkedin.com/in/melnik909/

twitter logo DISCUSS
Classic DEV Post from Jun 22 '18

Setup Continuous Integration with Travis CI in Your Nodejs App

This tutorial will take you through how to setup CI with Travis in nodejs app

Stas Melnikov profile image
Patreon blogger. I'm looking for my fans which I'll give away everything I know. If you're interested then join to me on Patreon 👉 https://www.patreon.com/melnik909

We're always making dev.to better.

Do you prefer sans serif over serif?

You can change your font preferences in the "misc" section of your settings. ❤️