Set width and height for responsive image.

voorhoede · Oct 18, 2024 · be8c674 · be8c674
1 parent b8fadd3
commit be8c674
Showing 1 changed file with 7 additions and 6 deletions.
diff --git a/src/blocks/ImageBlock/Image.astro b/src/blocks/ImageBlock/Image.astro
@@ -37,8 +37,6 @@ const imageUnavailableMessage = t('image_unavailable');
           loading={ loading }
           srcset={ getImageSrcSet(image.url) }
           src={ getImageSrc(image.url) }
-          height={image.height}
-          width={image.width}
           style={{
             aspectRatio: image.responsiveImage.aspectRatio,
             backgroundImage: `url(${image.responsiveImage.base64})`
@@ -50,10 +48,8 @@ const imageUnavailableMessage = t('image_unavailable');
           alt={ altText }
           loading={ loading }
           src={ image.url }
-          height={image.height}
-          width={image.width}
           style={{
-            aspectRatio: `${image.width}/${image.height}`,
+            aspectRatio: `${image.width} / ${image.height}`,
           }}
           data-unavailable={ imageUnavailableMessage }
         />
@@ -68,9 +64,14 @@ const imageUnavailableMessage = t('image_unavailable');
 
 <style>
 /* functional styling */
+figure {
+    max-width: 100%;
+    height: auto;
+}
+
 img {
   display: block;
-  max-width: 100%;
+  width: 100%;
   height: auto;
   background-size: cover;
 }