Unterschiedliche Bilder gleich platzieren

[cb1982]

Hallo zusammen,

ich bin gerade ein wenig gefrustet.
In einer Seite für Artikelangebote, an der ich gerade arbeite platziere ich auf einer Übersichtsseite ein Produktbild.

Damit das Bild ins Layout passt wird es in der CSS wie folgt behandelt

    .angebot img {
        width: 202px;
        height: 130px;
        border: 4px solid #d8d8d8;
    }

Das führt natürlich dazu, dass Bilder mit einem anderen Seitenverhältnis als dieses gestreckt oder gestaucht werden.
Jetzt habe ich in PHP eine Klasse entwickelt, die ein übergebenes Bild anhand von angegebener Max. Höhe und Max. Breite anpasst ohne das Seitenverhältnis zu ändern.

Das funktioniert aber natürlich zusammen mit dem CSS auch nicht, da ein schmales Hochkantbild direkt wieder auf 202px Breite gezerrt wird.

Jetzt kann ich die Breite und Höhe in der CSS einfach weg lassen, da durch die Bearbeitung ohnehin nur Bilder kommen, die nicht zu groß sind, aber wenn sie z.B. schmaler werden, werden sie nicht mehr zentriert sondern an den Rand gerückt.

Hat jemand eine Idee, wie ich das elegant lösen kann?

 

[NE4Y]

max-width und max-height

 

[cb1982]

Ich habe es jetzt so gelöst

    .imageholder {
    position:relative;
    display:table;
    height: 130px;
    width: 202px;
    vertical-align: middle;
    text-align: center;
    border: 0px solid #d8d8d8;
    text-align:center;
}
    .innerimage {
    width:100%;
    display:table-cell;
    vertical-align:middle;
    position:relative;
    text-align:center;
}