diff --git a/core/modules/responsive_image/responsive_image.module b/core/modules/responsive_image/responsive_image.module index 6fe09df0496d73f3dfe3ae07c67e7a09d1868349..0265d5663e934d43b392b3fc6b75d6c59696c1ec 100644 --- a/core/modules/responsive_image/responsive_image.module +++ b/core/modules/responsive_image/responsive_image.module @@ -190,18 +190,6 @@ function template_preprocess_responsive_image(&$variables) { '#uri' => _responsive_image_image_style_url($responsive_image_style->getFallbackImageStyle(), $variables['uri']), '#attributes' => [], ]; - - // We don't set dimensions for fallback image if rendered in picture tag. - // In Firefox, it results in sizing the entire picture element to the size - // of the fallback image, instead of the size on the source element. - $dimensions = responsive_image_get_image_dimensions($responsive_image_style->getFallbackImageStyle(), [ - 'width' => $variables['width'], - 'height' => $variables['height'], - ], - $variables['uri'] - ); - $variables['img_element']['#width'] = $dimensions['width']; - $variables['img_element']['#height'] = $dimensions['height']; } else { $variables['output_image_tag'] = FALSE; @@ -214,6 +202,18 @@ function template_preprocess_responsive_image(&$variables) { ]; } + // Get width and height from fallback responsive image style and transfer them + // to img tag so browser can do aspect ratio calculation and prevent + // recalculation of layout on image load. + $dimensions = responsive_image_get_image_dimensions($responsive_image_style->getFallbackImageStyle(), [ + 'width' => $variables['width'], + 'height' => $variables['height'], + ], + $variables['uri'] + ); + $variables['img_element']['#width'] = $dimensions['width']; + $variables['img_element']['#height'] = $dimensions['height']; + if (isset($variables['attributes'])) { if (isset($variables['attributes']['alt'])) { $variables['img_element']['#alt'] = $variables['attributes']['alt'];