Bootstrap Responsive Images Skalierung

Question

Mit Twitter Bootstrap merke ich, dass standardmäßig Bilder responsiv skaliert. Das ist großartig, aber nicht immer perfekt.

Sagen Sie zum Beispiel, ich habe ein 500x300 Bild auf dem Desktop, dann ändert es für mobile dieses Bild wird wirklich klein und nicht sehr groß sein, viel von den detaillierten Teilen des Bildes zu verlieren.

Ich habe gesehen, wie andere Websites tatsächlich das Bild nicht viel skalieren, sondern verwenden Sie das Elternteil div, um mask das Bild zu sortieren. (http://www.fitnessfireworks.com war ein großartiges Beispiel dafür, nicht mehr verfügbar.)

Was ist die beste Methode, dies zu erreichen? Eine Kombination aus CSS Hintergrundbild und Hintergrundbildskalierung? Ich suche nur nach Best Practices.

Answer 1

Wenn die Bildqualität wichtig ist, würde ich zwei Bilder mit einer anderen Klassendeklaration verwenden. Externe Tools werden immer besser skalieren als der Browser, der es im laufenden Betrieb macht.

Answer 2

Sie finden this Artikel nützlich. Es wird erläutert, über Bilder für ansprechende Anzeige zu optimieren und die Vermeidung von Mehrfachbild-Downloads

Answer 3

Ich habe gesehen, wie andere Websites viel das Bild eigentlich nicht maßstäblich, sondern die übergeordneten div Art das von verwenden, Maskenbild

Wenn Sie die CSS auf der Seite prüfen Sie erwähnen, werden Sie sehen, dass anstatt imline Bilder, sie sind in der Regel definieren divs mit Hintergrundbildern und mit CSS wie

#some-div { 
background-size: 100%; 
background-size: cover; 
background-position: center center; 
vertical-align: top; 
background-image: url(/.../image.jpg); 
} 

Hier ist ein Beispiel, wie Sie mit der Skalierung von Inline-Bildern gegenüber background-image völlig unterschiedliche Ergebnisse erzielen können.

http://www.bootply.com/67094

Der Schlüssel für die zweite Methode ist Hintergrund-Größe zu verwenden: Abdeckung und die Größe des div (und damit die Größe des Hintergrundbildes) zu manipulieren.

http://css-tricks.com/perfect-full-page-background-image/ hat gute Infos über Variationen und Optionen mit background-cover.