✔ Bildgröße abhängig von der Größe des Browserfensters - wie?

D

Dustin84

Erfahrenes Mitglied
Hallo,

ich hoffe ich bin im CSS Forum richtig.

Ich habe bei meiner Bildergalerie 4 Bilder nebeneinander, die bei vergrößerung des Browserfensters mitwachsen sollen. Demnach liegen die Bilder in einem DIV, welches 100% width hat. Ebenso muss ja die Größe der Bilder in % und nicht in Pixel angegeben werden.

Wenn ich also 1000px Breite habe, müsste die Breite der Bilder 25% (250px) betragen. (Sind ja 4 Bilder)
Wenn ich das Browserfenster kleiner ziehe, sagen wir auf 500px, dann wären es 12,5%.

Wie kann man das dynamisch erzeugen?

Gruß
D.
 
Hi,

die Antwort hast du dir eigentlich schon selbst geschrieben :)

Sowas funktioniert in deinem Fall grundsätzlich mit der relativen width:25%-Regel.

In einem Elternelement mit absoluter Breite bewirkt sie aber keine Verkleinerung der Bilder, da es im verkleinerten horizontalen Viewport weiterhin 1000px breit vom Browser dargestellt, und sein horizontaler Scrollbalken zur Verfügung gestellt wird, sobald sein Anzeigebereich die 1000px unterschreitet.

mfg Maik
 
ach ich hatte mal wieder ein Brett vorm Kopf...geht anz einfach:

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>

</head>

<body>

<div style="float:right;">
	<img src="/kleinerfuchs.jpg" width="20%" height="20%" border="0" />
  <img src="/natur-bank.jpg" width="20%" height="20%" border="0" />
  <img src="/natur-horen.jpg" width="20%" height="20%" border="0" />
</div>

</body>
</html>

So klappt's wunderbar.
 
Bist du dir sicher?

Dann wohl aber nur aus dem Grund, weil die Grafikdateien in ihrem Format eine entsprechend hohe Breite besitzen.

Du kannst dir dein Konstrukt mit der float-Regel für das umschliessende DIV zum Vergleich mal mit deutlich kleiner dimensionierten Bildbreiten (z.B. 70px) betrachten, wie sich ihre relative Breite im Verhältnis zur Browserfenstergröße verhält, wie groß sie darin ausfällt.

Code: 
<div style="float:right;width:100%;">


Und wozu noch die HTML-Attribute zur Formatierung?

CSS: 
img {
width:20%;
height:20%;
border:0; /* ergibt hier erst Sinn, wenn es sich um einen grafischen Verweis (<a><img></a>) handelt, der vom Browser einen (blauen) Rahmen erhält */
}

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück