包裹图像最大高度，寻找另一种解决方案

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指定width和height值

JS Fiddle＆lt;＆lt;水平和垂直调整结果面板的大小以查看行为。

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;