How to scale image height with vh div

Question

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/

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

Solution 1

This should fix it:

.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:
As per comment, it looks like you also want to enlarge the image when it's smaller than the lightbox. For that, the simplest solution is:

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

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

Solution 2

Use width:100vmin and height:vmin like this:

.modal-content {
  background:yellow;
  position: relative;
}   
.mySlides img {
  position: relative;
  max-width: 100%;
  width:80vmin;
  height:80vmin;
  margin-left: auto;
  margin-right: auto:
}

Cheers!