Automatische Skalierung von Bildern in eine CSS-flow-layout zu simulieren, eine html-table-layout
Habe ich ein Bild, dass, abhängig von der Bildschirmauflösung, lässt sich aus den Augen in meine CSS-flow-layout, weil ich habe seine Breite und Höhe, um statische Werte.
Gibt es eine Möglichkeit in einer CSS-flow-layout zu haben, das Bild automatisch verkleinern, während jemand macht das browser-Fenster kleiner. Ich habe gesehen, dies geschieht in einer html-Tabellen-layout und ich nehme an, die Tabellen machen es möglich, dass es - gibt es eine Möglichkeit, auch dies in einem CSS-flow-layout?
Du musst angemeldet sein, um einen Kommentar abzugeben.
Einen schnellen test zeigt, dass diese:
kombiniert mit:
Ändert die Weise, die Sie wahrscheinlich wollen. Das Bild der brav angepasst, um 50% der Breite der box, die Sie enthalten, sowie die Größenanpassung vertikal, Beibehaltung des Seitenverhältnisses.
Als für die Größenanpassung basierend auf vertikalen änderungen, es funktioniert nicht wie gewünscht, zumindest nicht durchgängig. Ich habe versucht:
In aktuellen Google Chrome (2.0.172), es ändert etwas inconsitently; die Dimensionierung ist richtig, aber nicht nach jedem update-Fenster ziehen. Im aktuellen Firefox (3.5), die Höhe scheint zu sein, komplett ignoriert. Ich habe keine Remote jüngsten IE, Safari, etc zu testen. Fühlen Sie sich frei, zu editieren in diese Ergebnisse. Auch wenn denen gar gut seinen wohl noch etwas, die Sie vermeiden möchten, und kleben Sie mit der Breite.
EDIT:
Für diese Arbeit, alle die Elemente mit img.test Größe werden mit Prozentsätzen, die nicht statisch.
Denken Sie an es auf diese Weise:
Nun nehmen wir an, ich fügen Sie ein div. so...
Dann
Wenn das der div "width: 100%" wenn, dann ist die Logik funktioniert die gleiche wie vorher. Solange ein gewisser Prozentsatz, und nicht behoben wird, können Sie spielen mit dem Prozentsatz, der auf die img und die Größe, die Sie wollen.
bisschen eine Vermutung, da mein css ist Müll, aber da niemand antwortet, was über die Einstellung des % Breite oder Höhe oder beides im Bild so, dass es ein Prozent der Eltern. weiß nich?
Versuchen Sie die Einstellung max-width etwas wie 95%. Danke, wie das Bild kleiner wird, wenn die container-Breite ist geringer als die Breite des Bildes. Alle übergeordneten Container brauchen würde, um adju