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.

Tasos · Accepted Answer · 2014-12-07T11:01:24.490

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/

Thanks a lot for you answer. As im trying to make a small gallery plugin i thought i needed this special architecture (overlay > imgActive > img) but it doesn't seem to be as usefull as i thougt. I will remove the imgActive and rework my plugin. Thanks again for your answer :) — Gbreux, Dec 07 '14 at 10:47
No problem. There are a few other methods like display:block but the css in the answer is mostly standard. The imgActive wrapper i can see is only useful if want another box to contain the pictures inside and moved at a particular position on the page, otherwise if the gallery will be full screen while maintainng the aspect ratio of the pictures you don't need it — Tasos, Dec 07 '14 at 10:59

Picture's height resizable issue

1 Answers1