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.
This commit is contained in:
ZL Asica 2024-02-07 10:34:52 -08:00 committed by GitHub
parent 1ce58650fd
commit 7c2e1c2c6c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 15 additions and 11 deletions

View File

@ -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 }}"