Fit a large image in a small div

Question

I have a conceptual question. What exactly happens when we fit a large image in the small container?

Say I am creating an HTML page to render a 100x100 px image. I have a device with a device pixel ratio of 2.

Case 1: Render the image inside a div of size 100x100 px

A div of height and width 100x100 px means the total device pixels available are 2x100x100 which is what exactly is needed for this image hence no problem

Case 2: Render the image inside a div of size 50x50 px

The total device pixel available are less than what is needed.

What happens in this case? Does the system perform some sort of downsampling?

Answer 1

According to https://drafts.csswg.org/css-images/ the default setting for image rendering is 'auto' and the scaling algorithm is user agent dependendant i.e. no standard has been set so it may differ across browsers.

For example, in the MDN documentation it says:

Since version 1.9 (Firefox 3.0), Gecko uses bilinear resampling (high quality).

The W3C document goes on to describe what should (preferably) happen when image rendering is specified for other values. But is is not prescriptive. Factors such as the system resources which are available are allowed to be taken into account.

So, if you have a specific system in mind you'd need to search to find what it actually uses when scaling or changing the image rendering CSS property.