bild in div ausrichten

[ohman]

Guten Mittag,

ich habe einen div mit der Höhe 30% und möchte darin ein Bild ausrichten und zwar so, dass es vom oberen Rand 50px und vom unteren Rand 20px Abstand hat und sich bis zu einer maximal-Höhe von 100px entsprechend anpasst.

Schematisch das HTML-Markup:

<div>
     <img>
</div>

Das CSS:

div {
    height: 30%;
    padding: 50px 0 20px 0;
}

img {
    height: 100%;
    max-height: 209px;
}

Das funktioniert nicht. Irgendeine Chance das hinzubekommen? Wenn nicht mit 50px und 20px dann zur Not auch vertikal znetriert - aber das ist ja auch nicht so unproblematisch vertikal zu zentrieren.

Grüße

[ChrisB]

Hi,

ich habe einen div mit der Höhe 30% und möchte darin ein Bild ausrichten und zwar so, dass es vom oberen Rand 50px und vom unteren Rand 20px Abstand hat und sich bis zu einer maximal-Höhe von 100px entsprechend anpasst.

Irgendeine Chance das hinzubekommen?

Unter Nutzung eines zusätzlichen Containerelements (bspw. SPAN) um das Bild herum:
SPAN im DIV absolut positionieren, 50px von oben und 20px von unten
IMG mit height:100%

Für eine Mindesthöhe des Bildes kann dann eine Mindesthöhe für das DIV-Element sorgen, wenn es nicht aus diesem herausragen soll.

MfG ChrisB

[ohman]

SPAN im DIV absolut positionieren, 50px von oben und 20px von unten

Wie "absolut" im DIV positionieren? Absolut geht ja nicht "in einem Element"?
Wieso span, gibt es dafür spezielle Gründe oder warum kein div?

Für eine Mindesthöhe des Bildes kann dann eine Mindesthöhe für das DIV-Element sorgen, wenn es nicht aus diesem herausragen soll.

Der div soll doch aber immer 30% hoch sein, wird der div höher als die Maximalgröße des Bildes kann einer der beiden Abstände nichtmehr eingehalten werden.

Sprich ist der div mit 30% kleiner als die maximale Bildhöhe + 50px + 20px, so soll das Bild entsprechend eingepasst werden.
Ist der div mit 30% größer soll der div weiterhin vergrößert werden, aber die Abstände können dann so nichtmehr eingehalten werden..

Grüße

[Der Martin]

Hallo,

SPAN im DIV absolut positionieren, 50px von oben und 20px von unten
Wie "absolut" im DIV positionieren? Absolut geht ja nicht "in einem Element"?

wieso soll das nicht "in einem Element" gehen? Wie sonst?

Wieso span, gibt es dafür spezielle Gründe oder warum kein div?

Beides sind neutrale, gruppierende Elemente; div ist allerdings ein Blockelement, während span ein inline-Element ist. In diesem Fall wäre, so wie ich das sehe, beides möglich und beides gleich gut oder gleich schlecht geeignet.

Ciao,
 Martin

[ChrisB]

Hi,

SPAN im DIV absolut positionieren, 50px von oben und 20px von unten

Wie "absolut" im DIV positionieren? Absolut geht ja nicht "in einem Element"?

Doch, natürlich geht das. Lies bitte in SELFHTML nach, wenn dir diese Grundlagen nicht geläufig sind.

Wieso span, gibt es dafür spezielle Gründe oder warum kein div?

Gibt es spezielle für ein DIV statt SPAN ...?

Sprich ist der div mit 30% kleiner als die maximale Bildhöhe + 50px + 20px, so soll das Bild entsprechend eingepasst werden.
Ist der div mit 30% größer soll der div weiterhin vergrößert werden, aber die Abstände können dann so nichtmehr eingehalten werden..

Das können sie in ersterem Fall dann ja auch nicht ...

Für diese Anforderung sehe ich momentan rein mit CSS keine praktikable Möglichkeit. JavaScript hinzu zu nehmen, um die entsprechenden Abstände zu berechnen, wäre natürlich möglich.

MfG ChrisB

[Matthias Apsel]

Ergänzung

Doch, natürlich geht das. Lies bitte in SELFHTML nach, wenn dir diese Grundlagen nicht geläufig sind.

etwas ausführlicher ist dieser Artikel.

Matthias

[Gunnar Bittersmann]

@@ohman:

nuqneH

ich habe einen div mit der Höhe 30% und möchte darin ein Bild ausrichten und zwar so, dass es vom oberen Rand 50px und vom unteren Rand 20px Abstand hat und sich bis zu einer maximal-Höhe von 100px entsprechend anpasst.

?? Das heißt, wenn die 30% div-Höhe 70px oder weniger sind, soll von dem Bild nichts zu sehen sein?

Warum gibst du nicht einfach dem div oder dem img padding: 50px 0 20px?

Qapla'