ライトボックス内の画像がコンテナの外にぶら下がっています

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： https://jsfiddle.net/ppkzt7m6/1/

：

* { 
    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です

誰かが解決策とその理由を説明していますか？

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

、USE THISに高さを追加します。

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

あなたはまた、フレキシボックスなしでそれを行うことができますが、キーは、私はあなたが行う場合は、背景画像を使用することをお勧め

jsFiddle

絶対位置に画像のキャプションを設定することですIEをサポートする必要があります。例：

jsFiddle

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