Automatisches Bild Die Größenänderung in einem CSS-Flusslayout, um ein HTML-Tischlayout zu simulieren

Question

Ich habe ein Bild, das abhängig von der Bildschirmauflösung in meinem CSS -Flusslayout außer Sichtweite fällt, weil ich seine Breite und Höhe auf statische Werte eingestellt habe.

Gibt es einen Weg in einem CSS -Flusslayout, das Bild automatisch zu ändern, während jemand das Browserfenster kleiner macht? Ich habe das in einem HTML -Tisch -Layout gesehen und ich gehe davon aus, dass die Tabellen es möglich machen - gibt es eine Möglichkeit, dies auch in einem CSS -Flusslayout zu tun?

Answer 1

Ein kurzer Test zeigt, dass dies:

<img class="test" src="testimage.jpg" />

kombiniert mit:

img.test { width: 50%; }

Größen Sie die Größe, wie Sie es wahrscheinlich wollen. Das Bild ist pflichtbewusst die Größe der Größenordnung auf 50% der Breite der Box, die sie enthält, sowie die Größe der Größe vertikal, wobei das Seitenverhältnis aufrechterhalten wird.

Für die Größe der Größe auf vertikalen Veränderungen funktioniert es nicht so, wie Sie es möchten, zumindest nicht konsequent. Ich habe es versucht:

img.test { height: 50%; }

In aktuellem Google Chrome (2.0.172) ändert es sich etwas inkonfessionell. Die Größe ist korrekt, aktualisiert aber nicht nach jedem Fenster. Bei aktuellem Firefox (3,5) scheint die Höhe vollständig ignoriert zu werden. Ich habe keine remote aktuellen IE, Safari usw. zu testen. Fühlen Sie sich frei, in diesen Ergebnissen zu bearbeiten. Auch wenn diese gut abschneiden, ist es wahrscheinlich immer noch etwas, das Sie vermeiden möchten, und bleiben Sie bei der Breite.

BEARBEITEN:Damit dies funktioniert, müssen alle Elemente, die IMG.Test enthalten, mit Prozentsätzen und nicht statisch dargestellt werden.

Denk darüber so:

• Der Körper ist 100% der Fenstergröße.
• IMG ist 50% des Körpers.
• IMG ist 50% der Fenstergröße.

Nehmen wir nun an, ich füge einen Div hinzu. so was...

<div class="imgbox" style="width: 100px;">
  <img class="test" src="testimage.jpg" />
</div>

Dann

• Der Körper ist 100% der Fenstergröße.
• Div ist 100px und ignoriert die Körperbreite.
• IMG ist 50% von Div.
• IMG ist 50px, unabhängig von der Fenstergröße.

Wenn die DIV "Breite: 100%" hat, funktioniert die Logik genauso wie zuvor. Solange es einige Prozentsatz und nicht repariert ist, können Sie mit dem Prozentsatz auf der IMG spielen und die gewünschte Größe erarbeiten.

Answer 2

Ein bisschen Vermutung, da mein CSS Müll ist, aber da niemand antwortet, was ist mit einer % Breite oder Höhe oder beides im Bild, damit es ein Prozentsatz seiner Eltern ist. Keine Ahnung?

Answer 3

Versuchen Sie, die maximale Breite auf 95%zu setzen. Dank des Bildes schrumpft das Bild, wenn die Behälterbreite weniger ist als die Breite des Bildes. Alle Elternbehälter müssten Adju müssten

max-width:95%;