Flexbox 图片不接受最大高度

Question

https://jsfiddle.net/qn6vcbvy/1/

问题

我的图像对于容器来说太大了。在 "normal" 情况下，图像会遵守最大高度值。在这种情况下，我使用 flexbox 并且它不听最大高度值。

结果应该是当图像比容器大时，图像会完美地适合黑色区域。

我知道可以为其使用背景。如果图像元素可行，我会投票。

为什么我使用最大高度而不是高度

max-height只会在必要的时候设置高度值，防止图片溢出容器。

如果容器比图像大，高度将回退到图像的高度。

这就是使用最大高度的原因。

html

<div class="modal-window">
    <div class="image">
        <img src="http://placekitten.com.s3.amazonaws.com/homepage-samples/408/287.jpg">
    </div>
</div>

css

.modal-window {
    background: #000;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    height: 150px;
    display: flex;

    justify-content: center;
    align-items: center;
}

.image {
  max-height: 100%;
}

.image img {
    max-height: 100%;
}

Answer 1

您可以从这里更改您的 css :

.image {
  max-height: 100%;
}

对此：

.image {
  height: inherit;
}

值 inherit 只是从其父项中获取值。

Flexbox 图片不接受最大高度

Flexbox image does not accept max-height

css

size

height

image

flexbox