Zitat von
kischd
Das Bild ist ja im Original 600x800px groß.
Der image_container möchte ich 300x300px machen.
So weit so gut
Das img ist ja standardmäßig immer oben links im image_container positioniert.
Ich hätte es aber gerne dass das img im Container mittig dargestellt wird
Das img soll nun aber mittig im Container stehen. Also bei einem hochformatigem Bild ein Stück oben und unten abgeschnitten...
Gesendet von meinem iPhone mit Tapatalk
Achso, die Information hättest du gleich im ersten Post geben sollen, auf der Seite selbst ist ja nichts davon implementiert.
PHP-Code:
figure {
margin:0;
position:relative;
width:300px;
height:300px;
background:#3684AF;
}
figure img {
display:block;
max-width:100%;
max-height:100%;
width:auto;
height:auto;
position:absolute;
left:0; top:0; right:0; bottom:0;
margin:auto;
}
Damit ist das <img> immer maximal so groß wie die fix definierte Größe des <figure> und zusätzlich ist das <img> in jede Richtung zentriert.
http://jsfiddle.net/wam5wgxq/
Das Padding des <figure>, dass du jetzt hast, müsstest du dann aber über
PHP-Code:
figure img {
display:block;
max-width:100%;
max-height:100%;
width:auto;
height:auto;
position:absolute;
left:20px; top:20px; right:20px; bottom:20px;
margin:auto;
}
realisieren.