From 7c2e1c2c6cea8e2b5818f31598399afc202a620b Mon Sep 17 00:00:00 2001
From: ZL Asica <40444637+ZL-Asica@users.noreply.github.com>
Date: Wed, 7 Feb 2024 10:34:52 -0800
Subject: [PATCH] Fix Image Dimension Styles for Better Responsiveness (#2166)

In this pull request, I've made adjustments to the image element's
handling of dimension properties. Previously, `min-width`, `min-height`,
`max-width`, and `max-height` were incorrectly placed as HTML attributes
on the `<img>` tag, which is not supported for these CSS properties.
This oversight could lead to issues with image responsiveness and layout
stability.

Changes:
- Moved `min-width`, `min-height`, `max-width`, and `max-height`
properties into the `style` attribute of the `<img>` tag. This change
ensures that these properties are correctly applied and recognized as
CSS properties, enhancing the responsiveness and flexibility of our
image displays.
- Retained `width` and `height` as attributes on the `<img>` tag to
maintain the intrinsic aspect ratio of images and help the browser
allocate space before images are fully loaded, improving the page load
experience.

These adjustments will ensure that our images are more responsive and
better adhere to the specified dimensions, improving the overall user
experience for the template.
---
 _includes/figure.liquid | 26 +++++++++++++++-----------
 1 file changed, 15 insertions(+), 11 deletions(-)

diff --git a/_includes/figure.liquid b/_includes/figure.liquid
index 9087dd929961..48ff465d88a2 100644
--- a/_includes/figure.liquid
+++ b/_includes/figure.liquid
@@ -38,17 +38,21 @@
       {% else %}
         height="auto"
       {% endif %}
-      {% if include['min-width'] %}
-        min-width="{{ include.min-width }}"
-      {% endif %}
-      {% if include['min-height'] %}
-        min-height="{{ include.min-height }}"
-      {% endif %}
-      {% if include['max-width'] %}
-        max-width="{{ include.max-width }}"
-      {% endif %}
-      {% if include['max-height'] %}
-        max-height="{{ include.max-height }}"
+      {% if include['min-width'] or include['min-height'] or include['max-width'] or include['max-height'] %}
+        style="
+          {% if include['min-width'] %}
+            min-width: {{ include.min-width }};
+          {% endif %}
+          {% if include['min-height'] %}
+            min-height: {{ include.min-height }};
+          {% endif %}
+          {% if include['max-width'] %}
+            max-width: {{ include.max-width }};
+          {% endif %}
+          {% if include['max-height'] %}
+            max-height: {{ include.max-height }};
+          {% endif %}
+        "
       {% endif %}
       {% if include.alt %}
         alt="{{ include.alt }}"