Picture's height resizable issue

Question

I have an issue when im trying to make a picture resizable, i explain:

• I have a div "overlay" that will fit the window;
• Inside this div i have another div "imgActive" that will contain some pictures centered on the window;
• Theses pictures inside has to fit the window no matter their size.

But, as you can see on this fiddle the picture inside fit horizontaly (the width change) but when you resize the window vertically, that doesn't resize at all (the height is still the same).

.overlay {
    background: rgba(0, 0, 0, 0.7);
    height:100%;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 999;
}
.imgActive {
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    left: 50%;
    max-height: 100%;
    max-width: 100%;
    position: absolute;
    top: 50%;
    z-index: 1000;
}
.imgActive img {
    max-height: 100%;
    max-width: 100%;
}

What can i do to make it works? To change the height ?

Thanks for your time.

Answer 1

You can use css directly on img. This method maintains the Aspect Ratio of the Picture

Demo

http://jsfiddle.net/ykf6b5ot/

CSS (adjust the min and max % to suit the image size you like)

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

Or you can use a single class

HTML

<div class="overlay">

  <img class="image" src="https://pbs.twimg.com/profile_images/471998783933251584/IF367cAS.jpeg" alt="" />

  </div>

CSS

.image {
    max-width:50%;
    max-height: 50%;
    margin: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
}

Demo

http://jsfiddle.net/1w9s9wx7/

For the wrapper imgActive you do exactly the same as the image CSS and adjust the height/width % you like. 100% is full screen

CSS

.imgActive {
  -webkit-transform: translate3d(0px, 0px, 0px);
    height: 50%;
    width: 50%;
    z-index: 1000;
    border:1px solid red;
    margin: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
}

Demo

http://jsfiddle.net/z69t00ns/