Set correct initial height on scaled images

Created on 11 October 2023, about 1 year ago

Problem/Motivation

When using scale instead of aspect ratio images currently use the smallest srcset width for the height attribute on the image tag.

$elements[$delta]['#item_attributes']->setAttribute('width', $elements[$delta]['#srcset'][0]['width']);
$elements[$delta]['#item_attributes']->setAttribute('height', $elements[$delta]['#srcset'][0]['width']);

This gets corrected as soon as the javascript kicks in or the image loads and the intrinsic size takes over. This can cause a layout shift.

Steps to reproduce

Render any image that has a height that's not equal to its width using 'scale'.

Check the width and height attributes in the page source.

Or open dev tools and throttle the network so you can see the dimensions shifting.

Proposed resolution

Calculate the correct height based on the image's aspect ratio.

🐛 Bug report
Status

Fixed

Version

1.3

Component

Code

Created by

🇧🇪Belgium kubrick

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

Comments & Activities

Production build 0.71.5 2024