使图像适合 div，最大高度为 Xpx 和 Xvh

Question

我一直在寻找一种解决方案，允许我将图像的最大高度设置为 85vh，同时也设置以 px 为单位的最大高度（以阻止图像变得比我想要的更大），同时使用 object-fit:contain 。

我已经设法让它与以下内容一起工作。这是我发现的最好的方法，所以想知道我是否遗漏了什么？有人对如何瘦身有任何指导吗？

.spacer-outer {

    width: 100%;

    text-align: center;

    display: block;

}

.spacer-outer .spacer-inner {

  display: inline-flex;

    max-height: 85vh;

}

.spacer-outer .spacer-inner .image {

    display: inline-flex;

    flex: 1;

    max-height: 750px;

}

.spacer-outer .spacer-inner img {

    max-width: 100%;

    max-height: 100%;               

    object-fit: contain;

}

<div class="spacer-outer">                  

    <div class="spacer-inner">

        <div class="image">

            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/6e/Monasterio_Khor_Virap%2C_Armenia%2C_2016-10-01%2C_DD_25.jpg/1920px-Monasterio_Khor_Virap%2C_Armenia%2C_2016-10-01%2C_DD_25.jpg" srcset="https://upload.wikimedia.org/wikipedia/commons/thumb/6/6e/Monasterio_Khor_Virap%2C_Armenia%2C_2016-10-01%2C_DD_25.jpg/1920px-Monasterio_Khor_Virap%2C_Armenia%2C_2016-10-01%2C_DD_25.jpg, https://upload.wikimedia.org/wikipedia/commons/thumb/6/6e/Monasterio_Khor_Virap%2C_Armenia%2C_2016-10-01%2C_DD_25.jpg/1920px-Monasterio_Khor_Virap%2C_Armenia%2C_2016-10-01%2C_DD_25.jpg 2x" width="1920" height="982" title="Test" alt="Test">

        </div> <!-- End of .image -->

    </div> <!-- End of .spacer-inner -->

    <div class="spacer-image-caption">

        Test Caption

    </div> <!-- End of .spacer-image-caption -->

</div>

Answer 1

可能最好将 max-height 设置为 vh，然后使用像素大小为 85vh > 750px 的媒体查询覆盖它；.image {&nbsp; &nbsp; max-height: 85vh;}@media (min-height: 882px) {&nbsp; &nbsp; .image {&nbsp; &nbsp; &nbsp; &nbsp; max-height: 750px;&nbsp; &nbsp; }}