100% Größe eines Bildes innerhalb einer Tabelle

Status
Nicht offen für weitere Antworten.
E

Experience1986

Erfahrenes Mitglied
Hallo Zusammen!

Ich möchte in einer Tabelle (100% * 100%) 9 Bilder anordnen. Die Bilder, sowie die Tabelle sollen sich relativ zur Browsergröße anpassen. Ich sehe darin generell kein Problem. Im Internet Explorer 6+7 funktioniert der folgende Code auch wunderbar. Allerdings wehrt sich der Firefox vehement gegen eine solche Darstellung.
Er skaliert die Tabelle, sobald im linken Bereich mehr als 3 Zellen / Bilder untereinander sind, über die Seite hinaus.

Das Bild welches angezeigt wird, macht derzeit keinen Sinn. Dieses wird später durch Flash-Objekte ersetzt. Dort gibt es aber genau das gleiche Problem. Den magentafarbene Balken benötige ich auch.

Ich hatte zuvor schon eine Variante mit ineinander Verschachtelten Tabellen versucht, allerdings gab es hier das gleiche Problem.

Woran liegt das? Was mache ich falsch?


HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

<head>
<meta http-equiv="Content-Language" content="de">
</head>

<body>

<table style="width: 100%; height: 100%" cellspacing="0" cellpadding="0">
	<tr>
		<td style="height: 50px; background-color: fuchsia" colspan="3"></td>
	</tr>
	<tr>
		<td id="idImage1">
		<img src="http://www.photoshop-weblog.de/images_articles/desktop-pc-icon.jpg" alt="" style="width: 100%; height: 100%"></td>
		<td id="idImage4">
		<img src="http://www.photoshop-weblog.de/images_articles/desktop-pc-icon.jpg" alt="" style="width: 100%; height: 100%"></td>
		<td id="idImage2" rowspan="4">
		<img src="http://www.photoshop-weblog.de/images_articles/desktop-pc-icon.jpg" alt="" style="width: 100%; height: 100%"></td>
	</tr>
	<tr>
		<td id="idImage3">
		<img src="http://www.photoshop-weblog.de/images_articles/desktop-pc-icon.jpg" alt="" style="width: 100%; height: 100%"></td>
		<td id="idImage5">
		<img src="http://www.photoshop-weblog.de/images_articles/desktop-pc-icon.jpg" alt="" style="width: 100%; height: 100%"></td>
	</tr>
	<tr>
		<td id="idImage8">
		<img src="http://www.photoshop-weblog.de/images_articles/desktop-pc-icon.jpg" alt="" style="width: 100%; height: 100%"></td>
		<td id="idImage9">
		<img src="http://www.photoshop-weblog.de/images_articles/desktop-pc-icon.jpg" alt="" style="width: 100%; height: 100%"></td>
	</tr>
	<tr>
		<td id="idImage6">
		<img src="http://www.photoshop-weblog.de/images_articles/desktop-pc-icon.jpg" alt="" style="width: 100%; height: 100%"></td>
		<td id="idImage7">
		<img src="http://www.photoshop-weblog.de/images_articles/desktop-pc-icon.jpg" alt="" style="width: 100%; height: 100%"></td>
	</tr>
</table>

</body>

</html>


Direkter Dateidownload: default.htm
 
Also, ich habe etwas weiter experimentiert.

Ich glaube nun das FF generell kein Bild auf 100% des übergeordneten Elements skalieren kann, wenn die Fläche des übergeordneten Elements kleiner als die reale Abmessung des Bildes ist, das dort dargestellt werden soll.

Liege ich da richtig?

Ich habe nämlich ein Bild genommen (10px*10px) und eingebunden. Firefox skaliert die gesamte Tabelle, samt den Bildern auf die richtige Höhe. Nehme ich aber ein Bild, das die Fläche der einzelnen Zelle von der realen Abmessung her übersteigt, so skaliert FF dann die Tabelle größer.

FF scheint also über Größenangaben in Prozent kein Bild kleiner skalieren zu können, als die reale Abmessung.

Oder hat hier Jemand andere Erfarungen gemacht?
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück