it-swarm.com.de

Responsive Images für Bootstrap-Skalierung

Mit Twitter Bootstrap stelle ich fest, dass Bilder standardmäßig ansprechend skaliert werden. Das ist großartig, aber nicht immer perfekt.

Angenommen, ich habe ein 500x300-Bild auf dem Desktop, dann ändert sich die Größe für das Handy, dass das Bild wirklich klein und nicht sehr groß sein wird und einen Großteil der detaillierten Bildteile verliert.

Ich habe gesehen, wie andere Sites das Bild tatsächlich nicht viel skalieren, sondern das übergeordnete div verwenden, 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, um dies zu erreichen? Eine Kombination aus CSS Hintergrundbild und Hintergrundbildskalierung? Suchen Sie einfach nach Best Practices.

9
Nic Hubbard

Ich habe gesehen, dass andere Sites das Bild tatsächlich nicht sehr stark skalieren, sondern eher das übergeordnete div verwenden, um das Bild zu maskieren 

Wenn Sie die Variable CSS auf der von Ihnen erwähnten Seite untersuchen, werden Sie feststellen, dass sie anstelle von eingebetteten Bildern Divs mit Hintergrundbildern definieren und CSS wie verwenden 

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

Hier ein Beispiel, wie Sie mit der Skalierung des Inline-Bildes gegenüber background-image völlig andere Ergebnisse erzielen können. 

http://www.bootply.com/67094

Der Schlüssel zur zweiten Methode ist die Verwendung der Hintergrundgröße: bedecken und bearbeiten Sie die Größe des div (und damit die Größe des Hintergrundbildes). 

http://css-tricks.com/perfect-full-page-background-image/ bietet gute Informationen zu Variationen und Optionen mit background-cover.

15
David Taiaroa

Sie können diesen Artikel nützlich finden. In diesem Abschnitt wird erläutert, wie Sie Bilder für eine responsive Anzeige optimieren und das Herunterladen mehrerer Bilder vermeiden 

1
Zim

Wenn die Bildqualität wichtig ist, würde ich zwei Bilder mit unterschiedlicher Klassendeklaration verwenden. Externe Tools können Bilder immer besser skalieren als der Browser, der dies im Direktbetrieb macht.