使图像适合 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 {

    max-height: 85vh;

}

@media (min-height: 882px) {

    .image {

        max-height: 750px;

    }

}