Ich habe nebenbei ein kleines Webportfolio über Tumblr laufen und arbeite gerade daran das Bilder in der Vorschau (380x280px) so dargestellt
werden das man zwar den Inhalt erkennt, aber nicht das komplette Bild geladen wird. Tumblr bietet dazu die Möglichkeit das Bild direkt nur in 250px oder 500px breite
zu laden. Im Moment funktioniert das ganze so:
Das Bild wird in einem "Entry" div der für alle Beiträge gerendert wird mit folgendem code angezeigt:
Der Div selbst hat über css seine größe, rahmen, überlappung für info & co.
Das funktioniert auch bestens für Bilder die breiter als hoch sind und die Fläche der Vorschau wird bestens ausgefüllt.
Ist das Bild aber höher als breit sind rechts & links leerplätze da sich das Bild nur der Höhe nach anpassen will. (Wie gewollt im code).
Ist es möglich das Bild wenn höhe > breite ist anders darstellen zu lassen? (Am besten ohne Javascript, vlt JQuery?)
Zum Verständniss:
// If width > height then
<a href="{permalink}"><img src="{PhotoURL-500}" alt="{PhotoAlt}" height="280"></a>
// else (height > width)
<a href="{permalink}"><img src="{PhotoURL-500}" alt="{PhotoAlt}" width="380"></a>
Edit:
Falls jemand das ganze live sehen möchte: Portfolio