Contrib.social

wrong height with aspect ratio

Open on Drupal.org →
Created on 20 June 2020, over 4 years ago
Updated 19 September 2023, over 1 year ago

Despite the correct image is loaded according to media query, the image is styled with the wrong height. This results in a wrong width displayed although there is enough space in the containing div. I hope attached images are explicit enough. here is the html produced :

<picture>
<!--[if IE 9]><video style="display: none;"><![endif]-->
<source data-srcset="path_to_styles/560/path_to_image/img_a.jpg?itok=UIXGYG4j&amp;timestamp=1590394515 1x" data-aspectratio="560/373" media="(min-width: 70em)" srcset="https://www.domain.com/sites/default/files/styles/560/path_to_image/img_a.jpg?itok=UIXGYG4j&amp;timestamp=1590394515 1x">
<source data-srcset="path_to_styles/468/path_to_image/img_a.jpg?itok=NJqDVVsj&amp;timestamp=1590394515 1x, path_to_styles/936/path_to_image/img_a.jpg?itok=NAPhOcMX&amp;timestamp=1590394515 2x" data-aspectratio="936/624" media="(min-width: 26em)" srcset="path_to_styles/468/path_to_image/img_a.jpg?itok=NJqDVVsj&amp;timestamp=1590394515 1x, path_to_styles/936/path_to_image/img_a.jpg?itok=NAPhOcMX&amp;timestamp=1590394515 2x">
<source data-srcset="path_to_styles/360/path_to_image/img_a.jpg?itok=IH_fCVq_&amp;timestamp=1590394515 1x, path_to_styles/720/path_to_image/img_a.jpg?itok=rS4Wr2TH&amp;timestamp=1590394515 2x, path_to_styles/1440/path_to_image/img_a.jpg?itok=evda78YF&amp;timestamp=1590394515 3x" data-aspectratio="1440/960" media="(min-width: 0px)" srcset="path_to_styles/360/path_to_image/img_a.jpg?itok=IH_fCVq_&amp;timestamp=1590394515 1x, path_to_styles/720/path_to_image/img_a.jpg?itok=rS4Wr2TH&amp;timestamp=1590394515 2x, path_to_styles/1440/path_to_image/img_a.jpg?itok=evda78YF&amp;timestamp=1590394515 3x">
<!--[if IE 9]></video><![endif]-->
<!--[if lt IE 9]>
<img  class="lazyload" data-aspectratio="" data-src="path_to_styles/1440/path_to_image/img_a.jpg?itok=evda78YF&amp;timestamp=1590394515" alt="L&#039;arc de Galère (Kamara)" title="" />
<![endif]-->
<!--[if !lt IE 9]><!-->
<img class=" lazyaspectratio lazyloaded" data-aspectratio="" data-srcset="path_to_styles/1440/path_to_image/img_a.jpg?itok=evda78YF&amp;timestamp=1590394515 1440w" alt="L'arc de Galère (Kamara)" title="" style="height: 120px;" srcset="path_to_styles/1440/path_to_image/img_a.jpg?itok=evda78YF&amp;timestamp=1590394515 1440w">
<!-- <![endif]-->
</picture>

The strange thing is that sometimes after resizing the window and reloading the page the "lazyaspectratio" class is not present in the html and when it happens the right image width is displayed.

- Desktop display:
720 image loaded
180x120 image displayed
359 div container width
375 page container & viewport width

- Mobile display:
560x373 image loaded
180.017x119.9 image displayed
567.717 div container width
1263 page container width
1280 viewport width

🐛 Bug report
Status

Closed: outdated

Version

2.0

Component

Code

Created by

🇫🇷France erwangel

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • Comment over 1 year ago →
    🇬🇧United Kingdom lesleyfernandes

    I am closing all very old tickets that have not received comments for a long time. If someone still faces these issues or thinks they are relevant, please reopen it. Feel free to contribute with more info or a patch.

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024