diff --git a/news/5096.bugfix b/news/5096.bugfix new file mode 100644 index 0000000000..53268f1831 --- /dev/null +++ b/news/5096.bugfix @@ -0,0 +1 @@ +Remove the default aspect-ratio from Image component. It was redundant and hard to override. @pnicolli \ No newline at end of file diff --git a/src/components/manage/Blocks/LeadImage/__snapshots__/LeadImageSidebar.test.jsx.snap b/src/components/manage/Blocks/LeadImage/__snapshots__/LeadImageSidebar.test.jsx.snap index 175dfb089e..d4e93ba656 100644 --- a/src/components/manage/Blocks/LeadImage/__snapshots__/LeadImageSidebar.test.jsx.snap +++ b/src/components/manage/Blocks/LeadImage/__snapshots__/LeadImageSidebar.test.jsx.snap @@ -22,11 +22,6 @@ exports[`renders a Lead Image block Sidebar component 1`] = ` sizes="188px" src="/image.png" srcSet="/image.png/@@images/image/image-400.png 400w" - style={ - Object { - "aspectRatio": "400 / 400", - } - } width={400} /> diff --git a/src/components/theme/Image/Image.jsx b/src/components/theme/Image/Image.jsx index 95f516d257..2709f6dfff 100644 --- a/src/components/theme/Image/Image.jsx +++ b/src/components/theme/Image/Image.jsx @@ -48,10 +48,6 @@ export default function Image({ attrs.src = `${baseUrl}${flattenToAppURL(image.download)}`; attrs.width = image.width; attrs.height = image.height; - attrs.style = { - aspectRatio: `${image.width} / ${image.height}`, - ...imageProps.style, - }; attrs.className = cx(className, { responsive }); if (!isSvg && image.scales && Object.keys(image.scales).length > 0) { diff --git a/src/components/theme/Image/__snapshots__/Image.test.jsx.snap b/src/components/theme/Image/__snapshots__/Image.test.jsx.snap index 08365627b5..eca5b39e38 100644 --- a/src/components/theme/Image/__snapshots__/Image.test.jsx.snap +++ b/src/components/theme/Image/__snapshots__/Image.test.jsx.snap @@ -8,11 +8,6 @@ exports[`renders an image component from a catalog brain 1`] = ` height={400} src="/image/@@images/image/image.png" srcSet="/image/@@images/image/image-400.png 400w" - style={ - Object { - "aspectRatio": "400 / 400", - } - } width={400} /> `; @@ -34,11 +29,6 @@ exports[`renders an image component with fetchpriority high 1`] = ` height={400} src="/image/@@images/image/image.png" srcSet="/image/@@images/image/image-400.png 400w" - style={ - Object { - "aspectRatio": "400 / 400", - } - } width={400} /> `; @@ -52,11 +42,6 @@ exports[`renders an image component with lazy loading 1`] = ` loading="lazy" src="/image/@@images/image/image.png" srcSet="/image/@@images/image/image-400.png 400w" - style={ - Object { - "aspectRatio": "400 / 400", - } - } width={400} /> `; @@ -69,11 +54,6 @@ exports[`renders an image component with responsive class 1`] = ` height={400} src="/image/@@images/image/image.png" srcSet="/image/@@images/image/image-400.png 400w" - style={ - Object { - "aspectRatio": "400 / 400", - } - } width={400} /> `;