Изменение размера изображения по высоте

Question

У меня есть проблема, когда я пытаюсь изменить размер изображения, я объясняю:

• У меня есть div "overlay", который будет соответствовать окну;
• Внутри этого div у меня есть еще один div "imgActive", который будет содержать несколько картинок по центру окна;
• Картинки внутри должны соответствовать окну независимо от их размера.

Но, как вы можете видеть на этой скрипке, изображение внутри умещается горизонтально (изменение ширины), но когда вы изменяете размер окна по вертикали, оно не изменяется вообще (высота все та же).

.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%;
}

Что я могу сделать, чтобы это работало? Чтобы изменить высоту?

Спасибо за ваше время.

Answer 1

Вы можете использовать CSS прямо на IMG. Этот метод поддерживает соотношение сторон изображения

демонстрация

http://jsfiddle.net/ykf6b5ot/

CSS (отрегулируйте минимальный и максимальный% в соответствии с размером изображения)

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

Или вы можете использовать один класс

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

демонстрация

http://jsfiddle.net/1w9s9wx7/

Для обертки imgActive Вы делаете точно так же, как изображение CSS и регулируете высоту / ширину%, который вам нравится. 100% на весь экран

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

демонстрация

http://jsfiddle.net/z69t00ns/