web-dev-qa-db-fra.com

Écrans Retina, images d'arrière-plan haute résolution

Cela peut sembler une question idiote.

Si j'utilise cet extrait de code CSS pour des affichages réguliers (Où box-bg.png est 200px par 200px);

.box{
    background:url('images/box-bg.png') no-repeat top left;
    width:200px;
    height:200px
}

et si j'utilise une requête multimédia comme celle-ci pour cibler les écrans de la rétine (l'image @ 2x étant la version haute résolution);

@media (-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { 

    .box{background:url('images/[email protected]') no-repeat top left;}
}

Dois-je doubler la taille de la .box div à 400px par 400px pour correspondre à la nouvelle image de fond haute résolution?

cssresponsive-designmedia-queries
96
Dean Elliott

Non, mais vous devez définir le background-size propriété correspondant aux dimensions d'origine:

@media (-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { 

    .box{
        background:url('images/[email protected]') no-repeat top left;
        background-size: 200px 200px;
    }
}

[~ # ~] éditer [~ # ~]

Pour ajouter un peu plus à cette réponse, voici la requête de détection de rétine que j'ai tendance à utiliser:

@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) { 

}

- Source

NB Cette min--moz-device-pixel-ratio: n'est pas une faute de frappe. C'est un bogue bien documenté dans certaines versions de Firefox et devrait être écrit comme ceci afin de supporter les versions plus anciennes (antérieures à Firefox 16). - Source

Comme @LiamNewmarch mentionné dans les commentaires ci-dessous, vous pouvez inclure le background-size dans votre raccourci background déclaration comme ceci:

.box{
    background:url('images/[email protected]') no-repeat top left / 200px 200px;
}

Cependant, personnellement, je ne conseillerais pas d'utiliser la forme abrégée, car elle n'est pas prise en charge dans iOS <= 6 ou Android, ce qui la rend peu fiable dans la plupart des situations.

174
Turnip

Voici une solution qui comprend également un DPI élevé ( [(# ~ ~] mdpi [~ # ~] )) > ~ 160 points par inch like de nombreux périphériques non iOS (par exemple: Google Nexus 7 2012 ):

.box {
    background: url( 'img/box-bg.png' ) no-repeat top left;
    width: 200px;
    height: 200px;
}
@media only screen and ( -webkit-min-device-pixel-ratio: 1.3 ),
       only screen and (    min--moz-device-pixel-ratio: 1.3 ),
       only screen and (      -o-min-device-pixel-ratio: 2.6/2 ), /* returns 1.3, see Dev.Opera */
       only screen and (         min-device-pixel-ratio: 1.3 ),
       only screen and ( min-resolution: 124.8dpi ),
       only screen and ( min-resolution: 1.3dppx ) {

       .box {
           background: url( 'img/[email protected]' ) no-repeat top left / 200px 200px;
       }

}

Comme @ 3rror404 inclus dans son édition après avoir reçu les commentaires des commentaires, il existe un monde au-delà de Webkit/iPhone. Une chose qui me gêne avec la plupart des solutions jusqu’à présent, comme celle référencée comme source ci-dessus à CSS-Tricks , est que cela n’a pas été pleinement pris en compte.
The source originale est déjà allé plus loin.

Par exemple, l’écran Nexus 7 (2012) est un écran TVDPI avec un étrange device-pixel-ratio de 1.325. Lors du chargement des images avec une résolution normale, elles sont redimensionnées via une interpolation et donc floues. Pour moi, l'application de cette règle dans la requête multimédia pour inclure ces périphériques a permis de recueillir les meilleurs commentaires de nos clients.

13
Volker E.

Si vous envisagez d'utiliser la même image pour la rétine et pour un écran autre que la rétine, voici la solution. Dites que vous avez une image de 200x200 et deux icônes dans la rangée supérieure et deux dans la rangée inférieure. Donc, c'est quatre quadrants.

.Sprite-of-icons {
  background: url("../images/icons-in-four-quad-of-200by200.png") no-repeat;
  background-size: 100px 100px /* Scale it down to 50% rather using 200x200 */
}

.sp-logo-1 { background-position: 0 0; }

/* Reduce positioning of the icons down to 50% rather using -50px */
.sp-logo-2 { background-position: -25px 0 }
.sp-logo-3 { background-position: 0 -25px }
.sp-logo-3 { background-position: -25px -25px }

En redimensionnant et en positionnant les icônes Sprite à 50% de la valeur réelle, vous pouvez obtenir le résultat attendu.

Une autre solution pratique de mixin SCSS par Ryan Benhase .

/****************************
 HIGH PPI DISPLAY BACKGROUNDS
*****************************/

@mixin background-2x($path, $ext: "png", $w: auto, $h: auto, $pos: left top, $repeat: no-repeat) {

  $at1x_path: "#{$path}.#{$ext}";
  $at2x_path: "#{$path}@2x.#{$ext}";

  background-image: url("#{$at1x_path}");
  background-size: $w $h;
  background-position: $pos;
  background-repeat: $repeat;

  @media all and (-webkit-min-device-pixel-ratio : 1.5),
  all and (-o-min-device-pixel-ratio: 3/2),
  all and (min--moz-device-pixel-ratio: 1.5),
  all and (min-device-pixel-ratio: 1.5) {
    background-image: url("#{$at2x_path}"); 
  }
}

div.background {
  @include background-2x( 'path/to/image', 'jpg', 100px, 100px, center center, repeat-x );
}

Pour plus d'informations sur mixin ci-dessus LIRE ICI .

1
Syed