如何使用 vh div 缩放图像高度

I'm trying to get this image to scale to the browser by height so it never causes scrolling ( it will be a light box with different image ratios) However it doesn't want to resize the image to fill the parent div and I'm not sure why. It also scales by sliding to the left rather than centering.

https://jsfiddle.net/hrfLwyjd/ https://jsfiddle.net/hrfLwyjd/

<style> 
.modal-content {
    width:80vw;
    height:80vh;
    background:yellow;
    display:flex;
    justify-content:center;
}   
.mySlides img {
    width:100%;
    height:auto;
}
</style>


 <div class="modal-content">

    <div class="mySlides">
     <img src="images/5_2.jpg">
    </div>

 </div>

这应该可以修复它：

.modal-content {
  width: 80vw;
  height: 80vh;
  background: yellow;
  display: flex;
  justify-content: center;
  align-items: center;
}

.mySlides img {
  max-width: 100%;
  max-height: 80vh;
  display: block;
}

<div class="modal-content">
  <div class="mySlides">
    <img src="http://i.imgur.com/cN0XcVQ.jpg">
  </div>
</div>

Update:
根据评论，看起来您还想在图像小于灯箱时放大图像。为此，最简单的解决方案是：

.modal-content {
  width: 80vw;
  height: 80vh;
  background: yellow;
  display: flex;
  justify-content: center;
  align-items: center;
}
.mySlides {
  background: transparent no-repeat center / contain;
  height: 100%;
  width: 100%;
}

<div class="modal-content">
  <div class="mySlides" style="background-image:url('http://i.imgur.com/cN0XcVQ.jpg')"></div>
</div>