我一直在尋找一種解決方案，允許我將圖像的最大高度設置為 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>
1 回答
慕后森
TA貢獻1802條經驗 獲得超5個贊
可能最好將 max-height 設置為 vh，然后使用像素大小為 85vh > 750px 的媒體查詢覆蓋它；
.image {
max-height: 85vh;
}
@media (min-height: 882px) {
.image {
max-height: 750px;
}
}
- 1 回答
- 0 關注
- 153 瀏覽
添加回答
舉報
0/150
提交
取消