CODEWITHSUNDEEP
cssretina-displayretina
AGamePlayer
AGamePlayer

Reputation: 7732

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

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?

Upvotes: 0

Views: 410

Answers (2)

Kheema Pandey
Kheema Pandey

Reputation: 10285

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..

Upvotes: 1

mohamedrias
mohamedrias

Reputation: 18576

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.

Upvotes: 1

Related Questions