響應圖像（寬度和高度）

Question

我正在為攝影師創建一個簡單的作品集網頁。 他想在網上展示自己的照片。 因此，圖像應具有響應性。 因此，我向圖像類編寫了以下代碼：

img {
    max-width: 75%;
    height: auto;
}

所以它適合任何屏幕寬度的圖像，但我想以全高顯示圖像。 因此，如果圖像具有更大的高度，則用戶必須向下滾動才能看到整個圖像。 那么我應該如何設置高度，以便立即顯示整個圖像？

帶着敬意，

安德烈（Andrej）

Answer 1

您是否嘗試過將其反轉，例如，嘗試賦予其高度，然后將寬度保留為自動.. !!!

因為您只需要設置兩者中的任意一個，另一個就相應地進行調整...

Answer 2

簡單：

max-height: 100%; /* or a bit less */

但是請注意文檔說的是：

<percentage>是相對於包含塊的高度計算的。 如果未明確指定包含塊的高度，則將百分比值視為無。

Answer 3

好的，我找到了解決方案。 我只是將最大高度設置為vh單位（視口高度）。 謝謝您的幫助。

Answer 4

嘗試這種方式： img{max-width:100%; max-height:100%;} img{max-width:100%; max-height:100%;}