How to scale image height with vh div

user_7941938 0
Viewed 15492

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. enter image description here

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>
flexbox css image html
4 Answers

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!

user_103991420
Related