流體圖像的寬度，匹配高度

Question

我想（如果它是所有可能的）使用CSS來使圖像100％的流體div的寬度，但由於圖像是方形的（並且如果不是方形）我希望能夠企及的高度與寬度...流體寬度我使用：

.img{ 
    max-width: 100%; 
    width: 100%; 
    min-width: 400px; 
} 

工作正常設置上的所有主流瀏覽器的寬度，但我只是無法弄清楚如何將高度與寬度匹配：/

Answer 1

嘗試將height:auto投擲到您的班級中。

.img{ 
    max-width: 100%; 
    width: 100%; 
    min-width: 400px; 
    height: auto; // <-- add me 
} 

正如在評論中提到的，大多數瀏覽器應該正確調整和縮放圖像。但很高興這可以幫助。

Answer 2

現在，在CSS3中，有相對於視口（瀏覽器窗口）測量的新單位，如果您需要關於窗口的流體圖像，則它在大多數情況下比「％」更好。這些是vh和vw，它們分別測量視口的高度和寬度。

.img{ 
    max-width: 100vw; 
    width: 100vw; 
    min-width: 400px; 
    height: auto; 
}