Retina-Displays, hochauflösende Hintergrundbilder

102

Das klingt vielleicht nach einer dummen Frage.

Wenn ich dieses CSS-Snippet für normale Anzeigen verwende (wobei box-bg.png200 x 200 Pixel groß sind);

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

und wenn ich eine Medienabfrage wie diese verwende, um auf Retina-Displays abzuzielen (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 .boxDiv auf 400 x 400 Pixel verdoppeln, um dem neuen hochauflösenden Hintergrundbild zu entsprechen?

Dean Elliott
quelle
Was ist die Dimension von images/[email protected]? Bitte stellen Sie es auf die Frage, um absolut klar zu sein.
TMS

Antworten:

184

Muss ich die Größe der .box div auf 400 x 400 Pixel verdoppeln, um sie an das neue hochauflösende Hintergrundbild anzupassen?

Nein, aber Sie müssen die background-sizeEigenschaft so einstellen , dass sie mit den ursprünglichen Abmessungen übereinstimmt:

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

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

BEARBEITEN

Um dieser Antwort ein wenig mehr hinzuzufügen, hier die Abfrage zur Erkennung der Netzhaut, 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ähnt hat, können Sie Folgendes background-sizein Ihre Kurzschrift aufnehmen background:

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

Ich persönlich würde jedoch nicht empfehlen, das Kurzformular zu verwenden, da es in iOS <= 6 oder Android nicht unterstützt wird, was es in den meisten Situationen unzuverlässig macht.

Steckrübe
quelle
Gibt es einen Tipp zum Festlegen der Hintergrundgröße für einen ganzseitigen Hintergrund? Ich kenne die Breite der x-Komponente, aber wie steht es mit der y?
Randy L
3
@theOther In diesem Fall möchten Sie wahrscheinlich verwenden background-size: cover;. Dadurch bleibt das Seitenverhältnis erhalten, während der gesamte Hintergrund mit Bild "bedeckt" wird.
Rübe
4
Wenn Sie möchten, können Sie die background-sizeEigenschaft wie folgt in Folgendes integrieren background: background: url('images/[email protected]') no-repeat top left / 200px 200px. Beachten Sie, dass Browser, die dies nicht unterstützen background-size, diese Regel ignorieren.
Liam Newmarch
2
@ LiamNewmarch Ich würde nicht empfehlen, dass ich als Android die Kurzform nicht zu verstehen scheint
Rübe
@ 3rror404 ah okay, fair genug. Vielen Dank!
Liam Newmarch
16

Hier ist eine Lösung, die auch MDPI- Geräte (High (er) DPI ) > ~ 160 Punkte pro Zoll enthält, wie einige Nicht-iOS-Geräte (z. B. 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 oben bei CSS-Tricks als Quelle angegebene , ist, dass dies nicht vollständig berücksichtigt wird.
Die ursprüngliche Quelle ging bereits weiter.

Als Beispiel ist der Nexus 7 (2012) Bildschirm ein TVDPI-Bildschirm mit einem seltsamen device-pixel-ratiovon1.325 . Wenn die Bilder mit normaler Auflösung geladen werden, werden sie durch Interpolation hochskaliert und sind daher unscharf. Für mich war es das beste Kundenfeedback, diese Regel in die Medienabfrage anzuwenden, um diese Geräte einzubeziehen.

Volker E.
quelle
1
Ein Bild 2x jeder Dimension hat genau das 4-fache der Pixel (z. B. kann theoretisch eine 4-fache Größe erwartet werden), während 1,325 * 1,325 nur eine Erhöhung der Pixel um 1,755625 unterstützt. Ich denke, die Qualität des Bildes würde in beiden Fällen mit 1,325 dppi verloren gehen, aber wenn Sie HiDPI verwenden, muss der Client einfach länger auf das Laden der Seite warten und hat einen höheren Stromverbrauch, um die Größe des Bildes zu ändern (und Nexus 7-Tabellen sind recht bekannt für zufällige Neustarts) und verbrauchen mehr Bandbreite. Daher würde ich empfehlen, @2xnur an 2dppx+ Kunden bedient zu werden .
cnst
3

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 200x200und 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 auf 50% über dem tatsächlichen Wert skalieren und positionieren, 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 );
}

Weitere Informationen zum obigen Mixin finden Sie HIER .

Syed
quelle