Hero headers' Owl Carousel configuration creates some image stretching issues
The auto-height configuration for the Owl Carousel jQuery extension used by components such as the Hero header makes some images to stretch as their height gets miscalculated.
Example:
Source: https://kt.cern
By inspecting the image, one can see the height
attribute has been dynamically set to an arbitrary value that doesn't correspond to the real maximum available height for the component (none of the images in the carousel are displayed full width — therefore the calculation for max height is wrong):
<img
alt="Thorbjoern We are energised and enthusiastic about our ongoing successful collaboration with CERN. The Timepix3 license helps our research-focused academic customers to spark breakthrough discoveries and advance science in a faster pace."
data-entity-type="file" data-entity-uuid="2af1f2e8-af93-4049-8794-3ddd3d9e1dac"
src="/sites/default/files/inline-images/16.png"
width="3368"
height="1247"
loading="lazy">
The height is the computed height at the original size. It breaks the layout when rendered at a different size. The width is also wrong but CSS makes sure to render it using the available width instead so the image won't overflow horizontally. Height should be computed using the rendered size as well.
Possible mitigation
Turn on (or off, documentation is not superclear) the autoHeight
option in Owl Carousel.
Owl.Carousel documentation
https://owlcarousel2.github.io/OwlCarousel2/demos/autoheight.html