Die Frage, die ich habe, ist ziemlich einfach.
Ich habe ein div mit responsiven Bildern. Auf sm die divs sind volle Breite wie:
%Vor%Welche Breite in px sollte ich für die Bilder verwenden, ich möchte die höchste Qualität für das Bild, das möglich ist.
Ich übergehe kein Bootstrap css, so dass es für den Standard Bootstrap 3 ist.
Ich weiß auch, je größer die Bildauflösung ist, desto besser ist die Qualität, aber ein 4k-Bild wäre auf einem div sm im Bootstrap unbrauchbar und eine Verschwendung von Ressourcen.
Wenn Sie feste Container und ein unformatiertes Bootstrap-CSS verwenden, beträgt die Containerbreite für kleine Geräte 750 Pixel (720 Pixel + Gitterrinnenbreite). Das heißt, die größtmögliche Spalte / Bild kann 720px (Containerbreite - Gosse) sein. Wenn Sie also sicherstellen möchten, dass die Bilder in bester Qualität angezeigt werden, müssen sie mindestens 720px breit und 1440px groß sein, um Retina-Bildschirme abzudecken.
Es gibt keine maximale Browserbreite, daher ist die kurze Antwort "so groß wie möglich" (aber bedenken Sie, je größer das Bild ist, desto länger dauert das Laden).
Was ich tun soll, ist es ähnlich wie Bootstrap. Bootstrap-Größen gehen von extra-klein zu groß und es betrachtet große Container (wenn nicht flüssig) 1170px Breite, also muss es mindestens ein Drittel davon sein, 390px (330px, wenn wir den Rinnenraum entfernen).
>Darüber hinaus wird es bei kleinen Bildschirmen in voller Breite angezeigt, bei denen der Bootstrap 750px (720px, wenn wir den Rinnenraum entfernen) als Minimalwert für 720px betrachtet.
Aber wenn Sie möchten, dass Ihr Netz auf Retina-Geräten oder ähnlichem gut aussieht, sollten Sie Bilder doppelt so groß verwenden, so dass das Ergebnis 1440px wäre (aber Sie sollten diese großen nur in diesen Geräten verwenden)
Ich würde nach einer Kompromisslösung zwischen Größe und Gewicht suchen.
Die Klasse col-md-4 erzwingt Bootstrap, um die drei horizontalen Bilder in drei Spalten aufzuteilen, wenn die Browserbreite 768 Pixel oder weniger beträgt. Die Rinnenbreite beträgt 15px so Die beste Bildbreite ist 738px. Dies würde für Bildschirmbreiten von bis zu 3 * 768 = 2304px funktionieren. Die meisten Bildschirme werden darunter fallen (siehe unten)
Bei größeren Breiten sollten Sie je nach Ihren Anforderungen testen ...
Tags und Links html css twitter-bootstrap