響應式圖像縮放與變化的最大高度

Question

指出一個例子比試圖解釋我試圖解決的問題要簡單得多，所以我會這麼做（對移動設備上的人們表示歉意，這是行不通的...）

我要實現的可VICE新聞（http://news.vice.com）

正如你所看到的，同時調整瀏覽器中看到的效果，圖像的長寬比保持整個某些尺寸不變。它跳躍到1200px，再跳到700px，同時縮放寬度和高度。

有沒有一種方法來實現這隻使用CSS？我的頭卡在這一個。

謝謝！

Answer 1

媒體查詢，當然。

如果你看看他們的源代碼，你會看到他們有3個不同版本的相同的圖像顯示在每個不同的大小（以最大限度地縮小比例）。然後，利用媒體查詢，它們會顯示正確的一個，並有其寬度填充頁面：

這裏的移動圖像，例如：

@media only screen and (min-width: 43.75em) 
{ 
    .lede .lede-images img.mobile 
    { 
     display: none; 
    } 
} 

而這裏的全局代碼：

.lede .lede-images img.mobile 
{ 
    width: 100%; 
} 

將寬度設置爲100％而不設置高度時，將在調整大小時自動保持高寬比。