如何在css中檢測圖像的縱橫比

Question

網頁包含的圖像有時處於「縱向」模式（高度>寬度），有時處於「橫向」模式（寬度>高度）。

當顯示這些圖像「整頁」時，我希望能夠將縱向圖像的高度設置爲100％（通過瀏覽器計算的寬度以尊重縱橫比），並將寬度設置爲100 ％爲風景圖像。

這是在JavaScript中做的微不足道的，但是有沒有一種方法/一個技巧沒有JavaScript，只用CSS？ （這是一個內部網站，JavaScript很可能被禁用;但是使用的瀏覽器是現代的，所以如果需要的話可以使用CSS3）。或者，如果這是不可能的，則服務於圖像的服務器可以對每個圖像的大小進行評估，併發送「縱向」作爲元數據;如果這是不可能的，這樣做的最有效方式是什麼（比如在PHP中）

Answer 1

這裏的訣竅是設置要限制圖像到其父容器的尺寸，然後將圖像的尺寸設置爲auto和他們的最大尺寸爲100％。

下面是一個快速示例，其中引入了一些定位以保持圖像居中;通過調整div和圖像的大小進行測試。

div{ 
 
    background:black; 
 
    height:300px; 
 
    width:600px; 
 
} 
 
img{ 
 
    height:auto; 
 
    max-height:100%; 
 
    left:50%; 
 
    width:auto; 
 
    max-width:100%; 
 
    position:relative; 
 
    top:50%; 
 
    transform:translatex(-50%) translatey(-50%); 
 
}

<div><img src="http://lorempixel.com/600/400/nature/3/"></div>