[CSS] Exakt mittige Darstellung von Vorschaubildchen
Verfasst: 23.03.2012 17:35
Moin!
Suche mir bei CSS wiedermal einen Wolf - oder ich steh' einfach nur auf der Leitung.
Weiß jemand Rat, wie ich das allein mit CSS hinbekomme, aber nach Möglichkeit auf calc() verzichte? Mit calc() bräuchte ich attr(height), was bei mir aber nicht funktioniert. Ich verwende Opera 11.61 und Firefox 11. Hierauf soll die Lösung zumindest funktionieren. JavaScript ist absolut keine Option! Auch die Positionierung per PHP in den HTML-Quelltext einzufügen, ist keine saubere Sache. Es wird doch wohl eine Lösung in CSS geben?
Gruß - WPö
Suche mir bei CSS wiedermal einen Wolf - oder ich steh' einfach nur auf der Leitung.
- Ich will zahlreiche <div>s mit Rahmen darstellen, die nach Fensterbreite automatisch umlaufen. Ist erledigt.
- Darin enthalten sind das Vorschaubildchen und ein Kommentar. Da nun aber bei einer Auflistung von Zillionen Bildchen diese sowohl im Hoch- wie im Querformat vorkommen können (wobei das Seitenverhältnis frei ist und die größte Abmessung 160px beträgt), wird ein Quadrat mit 160px Seitenlänge reserviert. Dieses Bildchen ist anklickbar und führt zu einem Bild im Vollformat (hier wegen evtl. Bandbreitenbeschränkung bei Euch auch nur ein anderes Vorschaubild). Auch dies ist erledigt.
- Jetzt kommen wir nur noch zur Positionierung des Bildes mit dem umschließenden Anker im <div> der zweiten Ebene, also mit 160x160px Größe. Das Bild im Hochformat wird korrekt zentriert, das im Querformat aber nicht (es sollte auf halber Höhe dargestellt werden). Offenkundig funktioniert das vertical-align: middle; nicht.
Code: Alles auswählen
<!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" xml:lang="de">
<head>
<title>Dokumenttitel</title>
<style type="text/css">
/*<![CDATA[*/
div.Bild {width: 160px; height: 216px; margin: 0 5px 5px 0; border: 1px inset #906030; padding: 1px; float: left;}
div.Bild div {display: inline-block; width: 160px; height: 160px; text-align: center; vertical-align: middle;}
div.Bild div a {margin: auto; text-decoration: none;}
div.Bild div a img {max-width: 160px; max-height: 160px; margin: 0; padding: 0;}
div.Bild p {margin: 0; font-size: 0.7em;}
/*]]>*/
</style>
</head>
<body>
<div class="Bild">
<div><a href="http://xn--wp-gka.de/Gfx/Hibiskus_Vorschau1.jpg"><img src="http://xn--wp-gka.de/Gfx/PY_2012/DSCF0004_Vorschau1.jpg" alt="Paraguays Pflanzenwelt" /></a></div>
<p><b>Abb. 3: Beispieltext.</b><br />Grö­ße des Bil­des: 3648×2736 (2,49 MB)</p>
</div>
<div class="Bild">
<div><a href="http://xn--wp-gka.de/Gfx/Hibiskus_Vorschau1.jpg"><img src="http://xn--wp-gka.de/Gfx/PY_2012/DSCF0013_Vorschau1.jpg" alt="Paraguays Pflanzenwelt" /></a></div>
<p><b>Abb. 7: Weiterer Text.</b><br />Grö­ße des Bil­des: 2736×3648 (2,48 MB)</p>
</div>
</body>
</html>Gruß - WPö