freedomofpress / pressfreedomtracker.us

Code for the U.S. Press Freedom Tracker project website
https://pressfreedomtracker.us
GNU Affero General Public License v3.0
18 stars 7 forks source link

Combination of max-width and image dimensions is creating distorted images #1364

Open harrislapiroff opened 2 years ago

harrislapiroff commented 2 years ago

Screen Shot 2022-04-05 at 11 29 07 https://redesign.pressfreedomtracker.us/blog/bevy-of-court-rulings-for-public-records-and-press-freedom/

I think the solution here is to remove the width and height attribute from the HTML, but if there's a way to preserve the ratio before the image is loaded, to prevent reflow, that would also be great.

SaptakS commented 2 years ago

I think there should be a way. On it.

Edit: I just realized you said maintain aspect ratio before image is loaded. I was thinking after loading. Before loading to prevent reflow might be trickier. There will be some reflow based on the aspect ratio after loading, but removing the attributes completely will cause a bigger jump in most scenarios. I think this is the best solution I can come up with immediately. Let me know if you have any other suggestions @harrislapiroff