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

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 Jan 29

CSS and JS Are at War, Here’s How to Stop It

There are a lot of people who love both JS and UX/CSS. If we stop labeling people just as “JS developers” or “UX developers”, we can achieve a ceasefire in the current “JS vs. CSS” war and achieve a mutually benefiting peace.

Stas Melnikov profile image

Sore eyes?

dev.to now has dark mode.

Go to the "misc" section of your settings and select night theme ❤️