在網頁html上，css只包含一個圖像，適合圖像到視口和水平和垂直中心

Question

這是一個非常簡單的一次性網頁，所以內聯CSS是任何東西都優先於正確/漂亮的CSS。用例非常簡單：拍攝大圖像（圖像寬2100px，高3000px），並確保它總是調整到90％的視口大小，並且圖像總是垂直和水平居中，無論視口大小如何。需要成爲純粹的HTML/CSS解決方案（無javascript/jquery）。該頁面除了這些圖像（包含在<a href>標籤和鏈接到另一頁面）中不包含其他內容。

我一直在用各種各樣的position:absolute，表格，div等等的變體，但似乎不能把東西放在一起，匹配我的用例。

Answer 1

只需將它們的絕對位置設置爲0，並將邊距設置爲自動。您可能需要在周圍的鏈接（或通常最外層的內聯元素）上設置它。沒有任何問題，如果真的有必要，雖然不會推薦。

img { 
 
    max-width: 90vw; 
 
    max-height: 90vh; 
 
    
 
    position: absolute; 
 
    left: 0; 
 
    right: 0; 
 
    top: 0; 
 
    bottom: 0; 
 
    
 
    margin: auto; 
 
}

<img src="http://via.placeholder.com/2100x3000">