Email or username:

Password:

Forgot your password?
Niki's posts Post Back to profile
Niki Tonsky

Frontenders, question. I want my images

1. To scale down with container width, but not up over their natural size.

2. When page loads, have their height specified somewhere so that content doesn’t jump

3. Page can be loaded at any width, so just specifying full image height won’t work. It has to be the height of the container after it’s scaled down.

I have full image dimensions and can do any math on server before producing HTML

Is it possible? How?
14 Sep 2023 at 15:12 | Open on mastodon.online
7 comments
iliazeus

@nikitonsky I'm not a real frontender, but shouldn't it work if you specify the natural height as the "height" img tag attribute, and then set up the scaling via CSS?

14 Sep 2023 at 15:23 | Open on lor.sh
Niki Tonsky
Niki Tonsky

Solution is as simple as

width: <X>px; max-width: 100%; aspect-ratio: <RATIO>;

Thanks!

14 Sep 2023 at 15:47 | Open on mastodon.online
Vadim Makeev

@nikitonsky The best way would be to set dimensions in markup for each image:

<img width height>

It helps browsers to render responsive images knowing their ratios even before they’re loaded: no jumping, better rendering performance.

As for CSS:

img { max-width: 100%; height: auto }

Unlike your solution, this one won’t limit you to a certain aspect ratio set in CSS.

14 Sep 2023 at 16:28 | Open on mastodon.social
Go Up