1

I am writing a custom Magento 2 theme which extends the default Blank theme and there's some peculiar HTML/CSS technique being used for product images (in the Related Products section) which I'm not familiar with.

The markup for the image part of each related item is like this:

<a ...>
  <span class='product-image-container' ...>
    <span class='product-image-wrapper' ...>
      <img class='product-image-photo'>
    </span>
  </span>
</a>

Here's a summary of the pertinent css:

.product-image-container {
  width:152px;
  display:inline-block;
  max-width:100%;
  /* nothing unusual so far */
}

.product-image-wrapper {
  padding-bottom:125%;
  display:block;
  height:0;
  overflow: hidden;
  position: relative;
  z-index:1
  /* ...then more styles unrelated to the question */
}

.product-image-photo {
  display:block;
  position:absolute;
  left:0;
  right:0;
  top:0;
  bottom:0;
  height:auto;
  max-width:100%;
  /* ...then more styles unrelated to the question */
}

The same technique is used in the Luma theme which can be seen on this Magento 2 example site http://magento2demo.firebearstudio.com/index.php/lando-gym-jacket.html (in the Related Products section at the bottom).

I understand how and why this works (with the position absolute with top/left/bottom/right 0 inside the relative div with height 0 and a border bottom), and I've tried searching for this technique elsewhere but it's tricky to word the search correctly to get a useful answer.

I'm wondering if anyone can explain the rationale behind using such a technique?

Is there any advantage in doing this rather than just placing an image inside a container in the standard fashion?

Dougall Winship
  • 33
  • 4
  • Most likely done to avoid page layout reflows during load, when the image is not available yet. https://stackoverflow.com/questions/44848866/in-html-css-is-the-padding-bottom-hack-for-imgs-still-the-best-way-to-ensure – 04FS Oct 25 '19 at 10:17
  • Thanks for that 04FS ... I'm grateful for you pointing me in the right direction! In my particular case I can probably safely specify and height and width on the container as an alternative so as not to befuddle future developers. – Dougall Winship Oct 25 '19 at 10:46

0 Answers0