包裝圖像的最大高度，尋找另一個解決方案

Question

雖然代碼是非常對稱的，但是當我在寬度上縮小窗口但是窗口高度變化沒有任何反應時，圖像會改變大小。大概我明白什麼是錯誤，但我沒有看到任何解決方案。

div { 
 
    max-width: 50vw; 
 
    max-height: 50vh; 
 
} 
 
img { 
 
    max-width: 100%; 
 
    max-height: 100%; 
 
}

<div> 
 
    <img src='http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-300mmf_35-56g_ed_vr/img/sample/sample4_l.jpg'>Notes 
 
</div>

Answer 1

您需要爲包裝DIV

JS Fiddle < <水平和垂直方向調整結果面板看到的行爲指定width和height值。

div { 
 
    width: 50vw; 
 
    height: 50vh; 
 
} 
 
img { 
 
    max-width: 100%; 
 
    max-height: 100%; 
 
}

<div> 
 
    <img src='http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-300mmf_35-56g_ed_vr/img/sample/sample4_l.jpg'>Notes 
 
</div>