Geek asks and answers

Retina image display with pure css

I have a situation where I can not know the size of the image (limited cms limit ...)

I need to figure out how to show a retinal level image, and I want to do this without using javascript (if possible).

I used:

@media only screen and (-webkit-min-device-pixel-ratio: 2) {}

but it only helped me with elements that have background images. Since this image cannot be background (since I do not know the size ...), what is the way to understand this?

I have logo.pngand logo2x.png, and my applicable markup looks something like this:

<h1 id="logo">
  <a href="/">
    <img src="images/logo.png">
  </a>
</h1>

javascript? css - webkit (ios/iphone ). logo.png , logo2x.png 2.

+5
2

: :

HTML:

<h1 id="logo">
  <a href="/">
    <img class="logo logo_normal" src="images/logo.png" />
    <img class="logo logo_retina" src="images/logo2x.png" />
  </a>
</h1>

CSS:

.logo_retina { display: none; }

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    .logo_normal { display: none; }
    .logo_retina { display: block; }
}

html5doctor

: dabblet

HTML:

<h1><a class="logo ir" href="/">BRAND</a></h1>

CSS

#logo a {
    display: block;
    width: 200px;
    height: 200px;
    background: url('//placekitten.com/200');
}

@media  (-webkit-min-device-pixel-ratio:1.5),
        (min--moz-device-pixel-ratio:1.5),
        (-o-min-device-pixel-ratio:3/2),
        (min-resolution:1.5dppx) {
    #logo a {
        background: url('//placekitten.com/400');
    }
}
+3

- x2 ? Retina 1:1, - 50%. x2, .

+1

More articles:


All Articles