How to use CSS to make this works on retina screen?

Question

Code is like:

<a href="http://localhost/link-a"><img src="a.png"></a>

The image file a.png is 100x100 but on retina screen it's very ugly so I can generate a 2x PNG file. But how do I make it work in this HTML code?

use media query to show respective image based on device-pixel-ratio — mohamedrias, Mar 30 '15 at 05:24
first I would suggest instead of using image use a `svg` format, but if you can't use 'svg' format than you can use `srcset` attribute. — Kheema Pandey, Mar 30 '15 at 05:24
@KheemaPandey I love svg, but I can't use it. Your idea `srcset` is awesome, thanks! Would you minding posting an answer with `srcset` solution? — AGamePlayer, Mar 30 '15 at 05:27

score 1 · Answer 1 · answered Mar 30 '15 at 05:27

Best option would be to use svg image which would fit in all resolutions.

But for your current code, you can use media query

HTML:

<a href="http://localhost/link-a"><img src="a.png" class="normalDisplay"><img src="abiggerresolution.png" class="retinaDisplay"></a>

In your CSS:

@media 
(-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { 
   img.normalDisplay {
      display: none;
   }
    img. retinaDisplay {
      display: block;
   }
}

Pure JS solution:

var retina = window.devicePixelRatio > 1;

if(retina) {

 document.querySelector("img.specifyclassname").src="mention your higher resolution image link";

}

Another option would be: Use retina.js link.

The script will check your server to see if you have any image source with @2x at the end. It will replace that image with the higher resolution image.

score 1 · Accepted Answer · answered Mar 30 '15 at 05:31

1

I'll suggest to go for SVG if you are using icons. However if you want to use image you can use srcset attribute.

<img src="image-src.png" srcset="image-1x.png 1x, image-2x.png 2x, image-3x.png 3x, image-4x.png 4x">

see can i use..

answered Mar 30 '15 at 05:31

Kheema Pandey

9,977
4
25
26

(@3x) use for iPhone 6 Plus :) – Kheema Pandey Mar 30 '15 at 06:03

How to use CSS to make this works on retina screen?

2 Answers2