Max-Höhe auf IMG funktioniert nicht innerhalb von festen DIV

Question

Was ich erfahre ist, dass das Bild weit über das div ist es sitzt, obwohl das CSS sagt, es sollte in der max-height von 700 sitzen.

Jede Hilfe willkommen

#largephotohold { 
 
    border: 0px black solid; 
 
    position: fixed; 
 
    bottom: 0px; 
 
    width: 90%; 
 
    margin-left: 5%; 
 
    background-color: white; 
 
    text-align: center; 
 
    border: 3px solid red; 
 
    max-height: 700px; 
 
} 
 

 
#largephotohold IMG { 
 
    max-height: 100%; 
 
    max-width: 100%; 
 
}

<DIV id="largephotohold"> 
 
<img src="http://i.imgur.com/AUn1uj6.jpg"> 
 
</DIV>

https://jsfiddle.net/e8nx0cto/

Answer 1

Wenn Sie einen Prozentsatz der Höhe auf ein Element anwenden, müssen Sie setzen ein height auf dem übergeordneten. Die Einstellung max-height oder min-height funktioniert nicht (wie Sie sehen können). Es muss die height Eigenschaft sein.

Für eine Abbildung, wechseln Sie die max-height: 700px zu height: 700px. Jetzt funktioniert deine Bildhöhe.

Alternative Lösung: Da Sie Ihr Bild doch sagen, max-height: 100%, eines Behälters, um mit max-height: 700px, warum nicht sagen, auch das Bild max-height: 700px zu sein? Dies führt Sie um das Problem mit der prozentualen Höhe herum.

Weitere Informationen:

• Working with the CSS height property and percentage values

Answer 2

Sie sind ganz in der Nähe, man muss nur die maxheight auf Höhe ändern. Höhe hat auf dem Elternteil sein für das 100% des Kindes Elements zu arbeiten:

#largephotohold { 
    border: 0px black solid; 
    position: fixed; 
    bottom: 0px; 
    width: 90%; 
    margin-left: 5%; 
    background-color: white; 
    text-align: center; 
    border: 3px solid red; 
    height: 700px; /* max-height: 700px; */ 
} 

#largephotohold IMG { 
    max-height: 100%; 
    max-width: 100%; 
} 
<DIV id="largephotohold"> 
<img src="http://i.imgur.com/AUn1uj6.jpg"> 
</DIV> 

Answer 3

max-height: 400px; (auf dem div) bedeutet, dass der Inhalt dieses div (und es ist Höhe) variiert. Es könnte 100px oder 600px sein, wir wissen es nicht. max-height: 400px; begrenzt die Höhe des div. Wenn der Inhalt 200px ist, wird div auch 200px sein. Wenn der Inhalt 500px ist, wird Div 400px, aber jetzt haben wir extra 100px. In diesem Fall müssen Sie overflow: auto oder overflow: hidden auf dem Div einstellen. Wenn Sie dies nicht tun, wird der Inhalt (Ihr Bild) herausragen/überlaufen.

JSFiddle: Überprüfen Sie die Unterseite des Div, sehen Sie, wo der Rand endet und das Bild überläuft.

In Ihrem Beispiel deckt div die 90% des Körpers ab und seine maximale Höhe ist auf 400px eingestellt. Sie haben keinen Stil, um mit dem Überlauf umzugehen.

#largephotohold { 
    width: 90%; 
    max-height: 700px; /* 400px in jsfiddle */ 
} 
#largephotohold IMG { 
    max-height: 100%; 
    max-width: 100%; 
} 

Und mit max- Eigenschaften auf ein Bild scheint ein bisschen sinnlos. Das Bild ist kein Container. Es ist der Inhalt selbst. Es sollte seinen width und/oder height Satz haben.

Was Sie tun sollten, ist overflow: auto oder overflow: hidden auf Ihrem div, und width 100% auf dem Bild. Dein Bild wird so breit wie das div und seine Höhe wird das div überfließen.

JSFiddle

#largephotohold { 
 
    border: 0px black solid; 
 
    position: fixed; 
 
    bottom: 2%; 
 
    width: 90%; 
 
    margin-left: 5%; 
 
    background-color: white; 
 
    text-align: center; 
 
    border: 3px solid red; 
 
    max-height: 400px; 
 
    overflow: auto; /* or hidden */ 
 
} 
 

 
#largephotohold IMG { 
 
    width: 100%; 
 
}

<DIV id="largephotohold"> 
 
    <img src="http://i.imgur.com/AUn1uj6.jpg"> 
 
</DIV>