https://css-tricks.com/almanac/properties/o/object-fit/
I'd also suggest reading this. Having to write ultra-complicated media queries (width + resolution, etc.) feels friction-y. Instead, use sizes and scrset and the browser will take care of the rest.
"The reference pixel is the visual angle of one pixel on a device with a pixel density of 96dpi and a distance from the reader of an arm’s length. For a nominal arm’s length of 28 inches, the visual angle is therefore about 0.0213 degrees. For reading at arm’s length, 1px thus corresponds to about 0.26 mm (1/96 inch)." [1]
I'll just use cm, thanks
I get movies/games, but day to day browsing seems like just extra slowness?
And as other have said, use object-fit.
The point is it should be the same on 2K monitor with 1x scaling AND 4k monitor with 2x scaling.
Using the HTML markup allows the browser to load the images sooner instead of having to wait for the CSS to be downloaded, parsed, and evaluated.
And there is nothing preventing you from selecting a larger image on a 2K/4K display if you have it, or using CSS to provide additional cropping, zooming, etc.
In my opinion your best bet is to forget about all this px-fuckery and drop the `<img>` all together. Use a `<div>` with a `background-image`, and use media queries to control how the `background-image` is cropped, zoomed, or whatevered.
In general, `<img>` is a huge pain in the ass. It seems to defy all known layout rules and models, and I pretty much never want it to take up the x*y pixels that the image source is. I want it to take 100% of the width, or contain and crop it in 100% of the height, but all of this is notoriously annoying with an `<img>` tag. Seriously, use a `div` with a `background-image`. The semantics of having an image in an `<img>` tag don't matter, no one cares about it and your users won't notice it.