我一直在尋找一種解決方案,允許我將圖像的最大高度設(shè)置為 85vh,同時(shí)也設(shè)置以 px 為單位的最大高度(以阻止圖像變得比我想要的更大),同時(shí)使用 object-fit:contain 。我已經(jīng)設(shè)法讓它與以下內(nèi)容一起工作。這是我發(fā)現(xiàn)的最好的方法,所以想知道我是否遺漏了什么?有人對(duì)如何瘦身有任何指導(dǎo)嗎?.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>
使圖像適合 div,最大高度為 Xpx 和 Xvh
拉風(fēng)的咖菲貓
2023-09-04 16:56:02