IMG上的最大高度不工作在固定的DIV

Question

我所經歷的是，圖像是坐在它的div的方式過度，儘管CSS是說它應該坐在的700。

任何幫助表示讚賞

#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

當您將一個元素上的百分比高度，你需要設置height父。設置max-height或min-height不起作用（如您所見）。它必須是height財產。

如圖所示，將max-height: 700px切換爲height: 700px。現在你的圖像高度起作用。

替代解決方案：既然你告訴你的形象是max-height: 100%，容器與max-height: 700px的，何不也告訴圖像是max-height: 700px？這會帶您繞過百分比高度問題。

的更多信息：

• Working with the CSS height property and percentage values

Answer 2

你都非常接近，你只需要在maxheight改變高度。身高必須是父爲子元素的100％的工作：

#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;（在DIV）意味着這個div的內容（和它的高度）會有所不同。它可能是100px或600px，我們不知道。 max-height: 400px;限制div的高度。如果內容是200px，div也將是200px。如果內容爲500px，則div將爲400px，但現在我們有額外的100px。在這種情況下，您需要在div上設置overflow: auto或overflow: hidden。如果你不這樣做，內容（你的圖片）會突出/溢出。

JSFiddle：檢查div的底部，看看邊界結束和圖像溢出的位置。

在你的例子中，div覆蓋了身體的90％，其最大高度設置爲400px。您沒有處理溢出的風格。

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

而在圖像上使用max-屬性似乎有點沒有意義。圖像不是容器。這是內容本身。它應該設置其width和/或height。

你應該做的是在你的div上設置overflow: auto或overflow: hidden，在圖像上設置width 100%。你的圖像將和div一樣寬，它的高度會溢出div。

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>