You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
When using the image_tag, it will output an html img tag with width and height attribute of 100 (in this example, it should instead be width="2510" and height="675").
The issue is that the browsers consider the image aspect-ratio to be 1:1, which can mess a page layout, especially when the image specify the loading:'lazy' attribute. I have encountered this issue with lazy-loaded images in a carrousel. The carrousel height is jumping height as images are loaded, because the browser has been provided with a wrong aspect-ratio. Pretty poor UX.
Suggestion:
The width and height attributes should output a value based on the viewbox attribute for SVG images, especially if the SVG width and height attributes are set to 100%.
The text was updated successfully, but these errors were encountered:
Some SVG images are designed in a way that the aspect ratio is defined in the viewbox and not in the width and height attribute, such as:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2510 675" height="100%" width="100%">...</svg>
When using the
image_tag
, it will output an html img tag with width and height attribute of 100 (in this example, it should instead be width="2510" and height="675").The issue is that the browsers consider the image aspect-ratio to be 1:1, which can mess a page layout, especially when the image specify the
loading:'lazy'
attribute. I have encountered this issue with lazy-loaded images in a carrousel. The carrousel height is jumping height as images are loaded, because the browser has been provided with a wrong aspect-ratio. Pretty poor UX.Suggestion:
The
width
andheight
attributes should output a value based on theviewbox
attribute for SVG images, especially if the SVG width and height attributes are set to 100%.The text was updated successfully, but these errors were encountered: