csspositionfluid-images

Picture's height resizable issue


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

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.


Solution

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