Question

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

问题

我的图像对于容器来说太大了。在“正常”情况下，图像将遵循最大高度值。在这种情况下，我使用flexbox，它不会监听max-height值。

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

我知道可以使用它的背景。如果可以使用图像元素，它将获得我的投票。

为什么我使用的是max-height而不是height

最大高度仅在必要时设置高度值，以防止图像溢出容器。

如果容器大于图像，则高度将回落到图像的高度。

这就是使用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图片不接受最大高度

1 个答案: