Ich habe eine Seite mit 4.000+ Seiten und 10 oder mehr JPEG-Bildern pro Seite in verschiedenen Größen. Ich versuche, die Seite mobiler zu machen. Zu diesem Zweck möchte ich es ermöglichen, dass die Bilder auf kleinere Bildschirme schrumpfen. Ich weiß, dass ich etwas tun kann, um zu signalisieren, dass die Bilder schrumpfen können:
%Vor%Aber was, wenn nicht alle Bilder eine Breite von 357 (oder was auch immer) haben, und ich möchte nicht, dass kleinere Bilder über ihre wahren Dimensionen hinaus gestreckt werden? Und nur um die Dinge noch lustiger zu machen, was ist, wenn die Bilder-Tags keine Attribute für Höhe und Breite haben?
Mein Ziel ist es, eine Lösung zu finden, bei der ich nicht zehntausende von Bildaufrufen manuell anpassen muss, aber ich kann suchen und ersetzen. Bilder sind derzeit in einen Div-Container eingeschlossen und haben eine Klasse wie folgt:
%Vor%Ich bin auch offen für die Möglichkeit, dass ich das völlig falsch mache.
max-width ist einfach, effektiv und benötigt kein JavaScript .
Das unten stehende CSS erstellt reaktionsfähige Bilder, die so verkleinert werden, dass sie der Breite des Containers entsprechen, aber nicht über ihre nativen Größen hinaus expandieren.
%Vor%In der folgenden Demonstration sind beide Bilder 300 x 75 Pixel groß. Der erste Container ist 200 Pixel breit und der zweite ist 400 Pixel breit. Beachten Sie, dass das erste Bild verkleinert wird, um in den Container zu passen, das zweite Bild jedoch nicht über seine ursprüngliche Größe hinaus erweitert wird. Beachten Sie auch, dass die Proportionen jedes Bildes genau bleiben.
Zusätzliche Hinweise
display:block eingefügt, um den Abseilraum zu entfernen unter dem Bild. height:auto und / oder width:auto hinzufügen, um diese Attribute zu überschreiben. Sie können ein wenig jQuery verwenden, um die native Breite jedes Bildes herauszufinden , und setze für jedes Bild danach maximale Maximalbreiten:
%Vor%UPDATE: Wenn Sie möchten, dass jedes Bild eine einheitliche Breite hat, können Sie die kleinste maximale Breite speichern und auf alle Bilder anwenden:
%Vor% Verwenden Sie max-width:100% and height: auto in Ihrem CSS. Wenn Sie Ihre Website mobilfreundlich machen möchten, würde ich vorschlagen, in das Bootstrap-Framework für mehr Flexibilität zu schauen.