fix: `<img>` aspect ratio w/ `height: auto` #2730

Pinjasaur · 2024-07-07T16:13:39Z

Complement the max-width: 100% with a height: auto to preserve <img> aspect ratios, particularly when it's not wrapped in a block parent e.g. <p> or <figure> most commonly.

Related: https://www.smashingmagazine.com/2020/03/setting-height-width-images-important-again/

An example scenario that this fixes: https://reader.miniflux.app/share/8bd2c1ae6b6577ef9c81106964f9a9e9865edb0d

Before:

After:

Do you follow the guidelines?

I have tested my changes
There is no breaking changes
I really tested my changes and there is no regression
Ideally, my commit messages follow the Conventional Commits specification
I read this document: https://miniflux.app/faq.html#pull-request

Complement with `max-width: 100%` with a `height: auto` to preserve `<img>` aspect ratios, particularly when it's not wrapped in a block parent e.g. `<p>` or `<figure>` most commonly. Related: https://www.smashingmagazine.com/2020/03/setting-height-width-images-important-again/

mfossen

I've also run into this before

mfossen reviewed Jul 7, 2024

View reviewed changes

fguillot merged commit 2fbe2df into miniflux:main Jul 9, 2024
16 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: `<img>` aspect ratio w/ `height: auto` #2730

fix: `<img>` aspect ratio w/ `height: auto` #2730

Pinjasaur commented Jul 7, 2024

mfossen left a comment

fix: <img> aspect ratio w/ height: auto #2730

fix: <img> aspect ratio w/ height: auto #2730

Conversation

Pinjasaur commented Jul 7, 2024

mfossen left a comment

Choose a reason for hiding this comment

fix: `<img>` aspect ratio w/ `height: auto` #2730

fix: `<img>` aspect ratio w/ `height: auto` #2730