2017-02-25 8 views
0

Ich versuche eine Möglichkeit zu finden, ein Bild für die Retina-Anzeige zu skalieren, ohne dass es ein Hintergrundbild ist oder andere Bilder verwendet.Größe eines Bildes für Retina-Display ändern

Mein Plan ist es, 800x600 px Bilder zu verwenden, und für normale Displays einfach nach 400x300 Probe, aber für Retina halten Sie es bei 800x600 aber bei doppelter Pixeldichte, dh es zeigt das Aussehen von 400x300, aber es hat zweimal die Pixeldichte.

Gibt es eine Möglichkeit, dies in CSS zu tun?

Die nächstgelegene ich bekommen kann, ist so etwas wie dies das Retina-Verhältnis zu finden:

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

Aber dann, wie die Bilder mit dem doppelten Pixeldichte Anzeige zu machen, effektiv es halb so groß wie auf der Netzhaut zu machen?

+0

_ "für normale Displays einfach nach unten zu 400x300 Probe, aber für Retina halten Sie es bei 800x600 aber bei doppelter Pixeldichte, dh es zeigt das Aussehen von 400x300" _ - das braucht keine Medienabfragen, nur 'Breite: 400px; height: 300px; '- _because_ CSS Pixel und Device Pixel sind unterschiedliche Dinge. – CBroe

Antwort

0

Vielleicht werden Sie diese Retina.js von imulus verwenden - scheint eine große Auswahl an Werkzeugen zu haben, die für den Umgang mit Retina-only Medienabfragen nützlich sind.

Hier ist der Link: http://imulus.github.io/retinajs/

Dennoch ist es nicht eine Möglichkeit in CSS umzugehen, dann würden Sie die JavaScript ein bisschen Liebe hier geben müssen.

Verwandte Themen