Bild Breite/Höhe darstellen auf einer Webseite

  • 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:

    PHP
    <a href="{permalink}"><img src="{PhotoURL-500}" alt="{PhotoAlt}" height="280"></a>


    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:

    PHP
    // 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

  • Mit Javascript kannstes doch auch machen ?

    Code
    var Image = document.getElementById('DeinImgID');
    if (Image.style.width > Image.style.height)
    {
    ...
    }
    //Und ebenso dann auch mit der Höhe


    Versteh also net was du mit JQuery machen willst ...

    Es gibt sehr viele Leute, die glauben. Aber aus Aberglauben.
    - Blaise Pascal

  • Das Problem mit Javascript ist, das viele es ausgeschaltet haben :/
    Deswegen hatte ich auch das laden neue Beiträge (endloses scrollen) und co in jQuery geschrieben.
    Ich werd's jetzt erstmal mit Javascript machen & dann mal sehen ob sich das ganze nicht kompatibler umsetzen lässt.

    Edit:
    Funktioneren css befehle wie min-width und co nicht auf img tags?
    Das würde sonst auch eine Möglichkeit sein, oder?

    Einmal editiert, zuletzt von Sen (13. Juli 2012 um 15:23)

  • Doch müssten sie.
    Verwende besser den setAttribut befehl; aber jQuery is doch Javascript 0.0

    Es gibt sehr viele Leute, die glauben. Aber aus Aberglauben.
    - Blaise Pascal