[ex³]

Hallo Leute,

Ich habe eine ul-Liste, die Thumbnails enthält, eine kleine Gallery eben. Die Listenpunkte werden links gefloatet, etc. damit ich zu einer gitterartigen Darstellung komme, die sich flexibel an die Bildschirmbreite anpasst.

Problematisch ist nun die Bildgröße des Thumbs. Bei der derzeitigen Thumbgenerierung gebe ich nur die Breite des Thumbs an. Die Höhe wird dann proportional angepasst. Dadurch geht aber meine gitterartige Darstellung kaputt wenn ein Thumb mal recht hoch ist (gleiches gilt auch für die Breite)

Serverseitig dachte ich erst ich generiere quadratische Thumbs, damit ich innerhalb der Thumbs proportional die Bilder darstellen kann, der Rest wird mit schwarzen Balken aufgefüllt. Die Balken stören mich aber dann schon doch. Ich glaube als ich versuchte hatte das ganze Transparent zu machen ging das etwas auf die Performance...denke als clientseitig lies sich das einfacher in den Griff kriegen.

Über CSS kann ich die Thumbs innerhalb der Listenpunkte anpassen. Dort gebe ich nur die Breite mittels li img {width: 64px} die Höhe wird dann sauber angepasst. Ist das Bild aber recht hoch dann ragt das Thumb über die nächste "Zeile" hinaus. Gebe ich die Höhe explizit an sind meine prop. Thumbs gestrecht.

Hat jemand eine Ahnung wie ich mit php, css oder html eine gitterartige Thumbdarstellung egal wie die Maße der Thumb ausarten?

Eine andere Idee war bei der Erzeugung der Listenpunkte die Höhe und Breite des Thumbs zu prüfen und damit dann das CSS per style-Attribut anzupassen. Wovon ich aber noch nicht weiß ob sich damit irgendwas ausrichten lässt.


Hoffe ihr habt mein Problem verstanden.

[CIX88]

Eine ordentliche Lösung gibt es nur, wenn die Thumbs alle eine einheitliche Größe haben.
Das eigendliche Bild darf dabei aber nicht verzerrt etc... werden.
Also musst du dafür sorgen, dass deine Thumbs prop. auch als Thumb vorliegen.

Keine Werbung - nur ein Beispiel:
http://www.mediacix.de/images/Screenshots-Bilder.html

Hier sind die Originalbilder teilweise sehr unterschiedlich, aber alle Thumbs sind gleich groß.

[ex³]

Ja so hatte ich es auch getestet. Fixe Thumbmaße und dann ggf. mit schwarzen Balken oben oder unten. Die Balken gefallen mir halt nicht. Mal schauen wie ich es mache.

Ich versuchs nochmal mit einem transparenten PNG. Dann kommt die Balkenfarbe beim Dragndrop nicht so zum Vorschein.

[Artemis]

Also bei mir funktioniert folgendes wunderbar: (b ist a aber 90° gedreht)

<style type="text/css">
li {
	list-style: none;
	float: left;
	width: 160px;
	height: 160px;
	margin: 10px;
	text-align: center;
}
</style>
<ul>
	<li><img src="a.jpg" /></li>
	<li><img src="b.jpg" /></li>
	<li><img src="a.jpg" /></li>
	<li><img src="b.jpg" /></li>
	<li><img src="a.jpg" /></li>
	<li><img src="b.jpg" /></li>
	<li><img src="a.jpg" /></li>
	<li><img src="b.jpg" /></li>
	<li><img src="a.jpg" /></li>
	<li><img src="b.jpg" /></li>
</ul> 

Das einzige Problem ist, dass die breiten Bilder nicht vertikal zentriert sind.


Und zu quadratischen Thumbnails:
Ich würde die nicht verkleinern und Rand auffüllen, sondern verkleinern und dann Rand rechts und links (breites Bild) oder oben und unten (hohes Bild) abschneiden.

[CIX88]

Also ich habe keine Balken eingefügt. Die Thumbs sind vordefinierte Größen. Vom Originalbild wird dann ermittelt, ob die Breite oder die Höhe größer ist. Danach wird dann das Bild proportional verkleinert, dass es exakt in die vordefiniert Größe passt - fertig.
Das Bild wird dann im Bild nur noch mittig und zentriert platziert. Hier macht also die GDlib den größten Teil der Arbeit. Der Rest wird mit DIV und bissel CSS gemacht.

[ex³]

@CIX

Ok, Balken fügst du keine ein, aber Balken entstehen doch unweigerlich. Wenn das Bild breiter wie hoch ist, dann entstehen doch oben und unten Balken?

[CIX88]

Na gut, ich betrachte es mal weniger als Balken
Sagen wir mal, es entstehen Abstände, aber das ist normal wenn das Bild nicht in ein bestimmten Verhältniss von Breite zu Höhe vorliegt.