8

In 2017, is the "padding-bottom hack" (wrapping an img in a div with a padding bottom of Image Height / Image Width * 100%) still the best way to ensure space is allotted for a responsive (percentage-width) image to avoid a re-flow?

(More on padding-bottom trick: https://www.smashingmagazine.com/2013/09/responsive-images-performance-problem-case-study/#the-padding-bottom-hack)

BONUS: If the img tag specifies a width and height attribute, why couldn't the browser compute the space natively. Eg, <img src="..." height="100" width="200">? It has all the information it needs, no?

The "padding-bottom hack":

html

<div class="image-wrapper">
  <img class="image" src="...">
</div>

css

.image-wrapper {
    height: 0;
    padding-bottom: 50%;
    position: relative;
}
.image {
    width: 100%;
    position: absolute;
}
craigmichaelmartin
  • 6,091
  • 1
  • 21
  • 25
  • 1
    I've never heard of or used this hack. The solution I use is to add width and height to the `` tag, then add `max-width:100%;height:auto;` to the CSS. – Blazemonger Jun 30 '17 at 14:34
  • 1
    Here is a longer description of the "position-bottom hack" https://www.smashingmagazine.com/2013/09/responsive-images-performance-problem-case-study/#the-padding-bottom-hack – craigmichaelmartin Jun 30 '17 at 14:43
  • @craigmichaelmartin I think another option is to use `vw` and `vh` units on the parent, but your CSS numbers may not actually end up being any more intuitive than they will be with the padding-bottom hack. So not sure if it's necessarily "better." But I can post an answer if you're interested. – cjl750 Jun 30 '17 at 16:03
  • 1
    You misunderstood the idea of `padding-bottom` hack. It's used when you want a `
    ` to **have a certain aspect ratio** e.g. `4:3`, `16:9`, and **maintains it on all screen sizes**. Head over [this question](https://stackoverflow.com/questions/1495407/maintain-the-aspect-ratio-of-a-div-with-css) to understand more.
     – Fahmi Jun 30 '17 at 17:08
  • 1
    @Fahmi Yes, and so it applies perfectly for avoiding a re-flow when loading an image.. the parent div allots the space according to the img ratio, and the image (when retrieved) is positioned absolutely into that space, so avoids a re-flow. However, I'd be shocked that if in 2017 this technique must be applied in order to load an image without a reflow. Hence my question :) – craigmichaelmartin Jun 30 '17 at 17:47
  • @Blazemonger Your solution can't prevent reflow... Or I did something wrong? – user2959760 Sep 21 '17 at 13:56

1 Answers1

1

Chrome is adding an intrinsic-size attribute, EG: <img intrinsicsize="400x300" style="width: 100%">

This attribute allows developers to specify the intrinsic size of a media element (<img>, <video>, <svg:image>). With this attribute media elements will maintain their aspect ratios. Developers need only specify one dimension, either a percentage or pixel value, and the other dimension will be computed immediately without causing a visual re-flow.

https://www.chromestatus.com/feature/4704436815396864

craigmichaelmartin
  • 6,091
  • 1
  • 21
  • 25