Как изменить размер изображения до высоты экрана с помощью CSS?

Question

В отличие от многих людей, которые хотят, чтобы изображение заполняло весь экран, мне важна только высота изображения. Как я могу использовать CSS (желательно не JavasScript) для создания изображения любого размера, заполнить до 100% максимально возможного окна браузера высота , сохраняя при этом пропорции изображения, измененную ширину изображение по отношению к браузеру не имеет значения.

Я работаю с этим HTML:

<div class="images">
  <img/>
</div>

Большое спасибо!

Answer 1

img { height:100% }

или если вы хотите быть явным

img { height:100%; width:auto; }

высота 100%: http://jsfiddle.net/jmarikle/vz7q2bnk/
ширина 100%: http://jsfiddle.net/jmarikle/vz7q2bnk/1/

РЕДАКТИРОВАТЬ:

Этот ответ требовал некоторого внимания.Демо было сломано и вообще беспорядок.Я обновил его новыми изображениями, обновил правило, чтобы компенсировать встроенную природу изображений, а также нормализовал высоту и ширину тела и HTML-элементов.

Answer 2

Возможно, вы захотите взглянуть на CSS-единицы vh, vw, vmin и vmax - которые довольно хорошо поддерживаются .Есть хорошая статья, описывающая, как достичь 100% высоты здесь .

Кстати - остерегайтесь пробелов: это может добавить нежелательные поля.Удаление пробела, добавление числа с плавающей запятой или использование хака font-size: 0 поможет разобраться.Кроме того, при использовании других методов не забудьте установить height: 100% для элементов body и html.

Answer 3

Это может быть излишним:

.img {
    position: absolute;
    height: 100%;
    top: 0;
    bottom: 0;
}