it-swarm.com.de

Retina Displays, hochauflösende Hintergrundbilder

Das klingt vielleicht nach einer dummen Frage.

Wenn ich dieses CSS-Snippet für reguläre Anzeigen verwende (wobei box-bg.png 200 x 200 Pixel groß ist);

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

und wenn ich eine Medienabfrage wie diese verwende, um Retina-Displays anzusprechen (wobei das @ 2x-Bild die hochauflösende Version ist);

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

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

Muss ich die Größe des Divs .box Auf 400 x 400 Pixel verdoppeln, um dem neuen hochauflösenden Hintergrundbild zu entsprechen?

96
Dean Elliott

Nein, aber Sie müssen das background-size Eigenschaft, die den ursprünglichen Abmessungen entspricht:

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

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

[~ # ~] edit [~ # ~]

Um dieser Antwort ein wenig mehr hinzuzufügen, hier ist die Netzhauterkennungsabfrage, die ich normalerweise verwende:

@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) { 

}

- Quelle

NB. Dies min--moz-device-pixel-ratio: ist kein Tippfehler. Es ist ein gut dokumentierter Fehler in bestimmten Versionen von Firefox und sollte so geschrieben werden, um ältere Versionen (vor Firefox 16) zu unterstützen. - Quelle


Wie @LiamNewmarch in den Kommentaren unten erwähnte, können Sie die background-size in Ihrer Kurzform background wie folgt deklarieren:

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

Ich persönlich würde jedoch nicht empfehlen, die Kurzform zu verwenden, da sie in iOS <= 6 oder Android) nicht unterstützt wird und daher in den meisten Situationen unzuverlässig ist.

174
Turnip

Hier ist eine Lösung, die auch High (er) DPI ( MDPI ) Geräte > ~ 160 Punkte pro umfasst inch wie eine ganze Reihe von Nicht-iOS-Geräten (zB: 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;
       }

}

Da @ 3rror404 in seiner Bearbeitung enthalten ist, nachdem er Feedback von den Kommentaren erhalten hat, gibt es eine Welt jenseits von Webkit/iPhone. Eine Sache, die mich bei den meisten Lösungen stört, wie die, auf die oben unter CSS-Tricks verwiesen wurde, ist, dass dies nicht vollständig berücksichtigt wird.
Die Originalquelle ging schon weiter.

Der Bildschirm des Nexus 7 (2012) ist beispielsweise ein TVDPI-Bildschirm mit einem komischen device-pixel-ratio von 1.325. Beim Laden der Bilder mit normaler Auflösung werden diese durch Interpolation hochskaliert und sind daher unscharf. Für mich war die Anwendung dieser Regel in der Medienabfrage, um diese Geräte einzuschließen, das beste Kundenfeedback.

13
Volker E.

Wenn Sie vorhaben, dasselbe Bild für Retina- und Nicht-Retina-Bildschirme zu verwenden, finden Sie hier die Lösung. Angenommen, Sie haben ein Bild von 200x200 und haben zwei Symbole in der oberen Reihe und zwei Symbole in der unteren Reihe. Es sind also vier Quadranten.

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

Wenn Sie die Sprite-Symbole so skalieren und positionieren, dass sie 50% über dem tatsächlichen Wert liegen, erhalten Sie das erwartete Ergebnis.


Eine weitere praktische SCSS-Mixin-Lösung von 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 );
}

Für weitere Informationen über oben mixin LESEN SIE HIER .

1
Syed