Closed Pinjasaur closed 4 months ago
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.
max-width: 100%
height: auto
<img>
<p>
<figure>
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?
Complement the
max-width: 100%
with aheight: 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?