javascript - 在完整的浏览器窗口中显示图像，但仅在图像太大时才按比例缩小

Question

我想在整个浏览器窗口居中显示图像。不过有几个条件。如果图像大小适合浏览器的客户区，则以其原始大小显示。如果图像比浏览器客户端窗口高或宽，则按比例缩小图像。最后，如果用户调整浏览器的大小，图像将缩小(如果太大)，或者如果浏览器窗口超过图像大小，图像将缩放至不大于其原始大小。

我可以用 jQuery 完成所有这些，但我想知道是否可以单独使用 css 来完成？

编辑:

我得到的最接近的是:

https://jsfiddle.net/Deepview/o5vgo6du/

html

<div class="outerCont">   <img src="http://www.wonderslist.com/wp-content/uploads/2015/10/Doutzen-Kroes-Most-Beautiful-Dutch-Woman.jpg" /> </div>

CSS:

.outerCont {
  position: relative;
}

img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
   max-width: 100%;
    height: auto;
    width: auto;
}

但是图片没有垂直居中。

Answer 1

必须将以下内容添加到外部 div:

  width: 100vw;
  height: 100vh;

https://jsfiddle.net/Deepview/o5vgo6du/3/