Lightbox中的图像挂在容器外面

Question

我使用flexbox-styling构建了一个响应式灯箱，此灯箱中的图像不适合容器。 （如果有足够的垂直空间，它的工作正常）。

这是一个可视化问题的图像：

这就是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

重要的是在height元素的所有父容器上定义<img>，以使百分比高度正常工作。

在object-fit: cover;元素上使用<img>。注意，当前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;">

Answer 2

在#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 3

使用此。

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;
}