燈箱中的圖像掛在容器外部

Question

我使用柔性盒造型製作了一個響應式燈箱，並且此燈箱中的圖像不適合容器。 （如果有足夠的垂直空間，它工作得很好）。

下面是可視化的問題，一個形象：

那的HTML代碼：

<div id="dialog-container"> 
    <div id="dialog"> 
    <div id="dialog-content"> 
     <div class="image-wrapper"> 
     <img src="https://spotwild.org/css/images/dist/header/header-07-1600.jpg"> 
     </div> 
     <div class="thumbs"> 
     Here are the thumbs 
     </div> 
    </div> 
    </div> 
</div> 

CSS：

* { 
    margin: 0; 
    padding: 0; 
} 

html, body { 
    height: 100%; 
    width: 100%; 
} 

#dialog-container { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    background: black; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
} 

#dialog { 
    max-width: 80%; 
    max-height: 80%; 
    background: white; 
    padding: 50px; 
    box-sizing: border-box; 
    position: relative; 
} 

#dialog-content { 
    display: flex; 
    flex: 1 1 100%; 
    flex-direction: column; 
    box-sizing: border-box; 
    height: 100%; 
    max-height: 100%; 
} 

.image-wrapper { 
    display: flex; 
    flex: 1 1 auto; 
    justify-content: center; 
    align-items: center; 
    min-width: 0; 
    min-height: 0; 
} 

img { 
    min-width: 0; 
    min-height: 0; 
    max-height: 100%; 
    max-width: 100%; 
    display: flex; 
    flex: 0 0 auto; 
} 

.thumbs { 
    background: #eee; 
    padding: 20px; 
    line-height: 25px; 
    box-sizing: border-box; 
} 

這裏是相應的jsfiddle： https://jsfiddle.net/ppkzt7m6/1/

有人有解決方案，並解釋爲什麼會發生這種情況？

Answer 1

附加高度#dialog

#dialog { 
    background: white none repeat scroll 0 0; 
    box-sizing: border-box; 
    height: 100%; 
    max-height: 80%; 
    max-width: 80%; 
    padding: 50px; 
    position: relative; 
} 

Answer 2

使用此功能。

img { 
    display: block; 
    height: 100%; 
    max-height: 100%; 
    max-width: 100%; 
    min-height: 0; 
    min-width: 0; 
    width: 100%; 
} 
#dialog { 
    background: #ffffff none repeat scroll 0 0; 
    box-sizing: border-box; 
    height: 100%; 
    max-height: 80%; 
    max-width: 80%; 
    padding: 50px; 
    position: relative; 
} 

Answer 3

的重要組成部分，是對所有爲<img>元素，使百分比高度正常工作的父容器定義height。

並在<img>元素上使用object-fit: cover;。請注意，目前的IE11和Edge不支持它，但在所有其他現代瀏覽器上都可以正常工作，請參閱support tables。

jsFiddle

你也可以不用Flexbox的，關鍵是圖片標題設置爲絕對位置

jsFiddle

我建議如果你使用的背景圖片需要支持IE，例如：

jsFiddle

<div class="image-wrapper" style="background: url('https://spotwild.org/css/images/dist/header/header-07-1600.jpg') center/cover;">