Skip to content

Commit

Permalink
Fix Image Dimension Styles for Better Responsiveness (alshedivat#2166)
Browse files Browse the repository at this point in the history
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.
  • Loading branch information
ZL-Asica authored Feb 7, 2024
1 parent 1ce5865 commit 7c2e1c2
Showing 1 changed file with 15 additions and 11 deletions.
26 changes: 15 additions & 11 deletions _includes/figure.liquid
Original file line number Diff line number Diff line change
Expand Up @@ -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 }}"
Expand Down

0 comments on commit 7c2e1c2

Please sign in to comment.