1

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">
Tom T
  • 314
  • 2
  • 12

1 Answers1

0

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.

Trey
  • 17
  • 5
  • You can do 100% width or 100% height, both of the two work: depending on what you want. – Trey Aug 15 '20 at 01:28
  • I'm not looking to increase the size of the image, I'm looking to simulate what a low resolution image looks like on a device with a high DPR so that I understand why people use things like the srcset attribute. I'm not looking to fix anything, which is what is probably causing the confusion. I'm looking to actually see the artifacts created by the 2x or 3x scaling that can occur on some devices. – Tom T Aug 15 '20 at 01:59