Device pixel ratio not simulating in Chrome/Firefox dev tools?

Question

I've been testing different DPRs using Chrome and Firefox dev tools, and it appears that changing the DPR has no obvious effect on the final render.

I tried multiple test cases, both real life photos and illustrations. I made sure that the resolution of the image I used was significantly less than what would be rendered on a 2x or 3x display. See example below and use the responsive tools in Chrome or Firefox dev tools to change the DPR. I set the width of the image to be 500px in CSS. The intrinsic resolution of the image is 520 x 720 pixels. So on a @3x device it should be scaling that image to 1500px wide, making it look blurry.

Does my display need to support a 3.0 pixel ratio in order to simulate it?

body {
  background: #dddddd;
}

img {
  width: 500px;
  height: auto;
}

<img src="https://cdn.pixabay.com/photo/2013/07/13/11/34/apple-158419_960_720.png" alt="Red apple">

Answer 1

I believe you're looking for

body {
  background: #dddddd;
}

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

I think that's it? it scales the photo up, to stop it from scaling up you'd have to use max-width/max-height and set it to the highest you want it to go to before the %tage cuts itself off.