Как динамически масштабировать изображения по высоте, используя чистый CSS?

Этот выходит к профессионалам CSS:

Интересно, возможно ли добиться масштабирования изображения, как на этом сайте, используя чистый CSS?

Имейте в виду, что изображения начинают масштабироваться только при изменении высоты окна браузера, а не его ширины. (Просто говорю, потому что вся информация в Интернете, которую я нашел, касается изменения ширины.)

Реальной точкой соприкосновения, похоже, являются различные пороговые значения: изображения в форме ландшафта просто начинают уменьшаться, если они имеют ту же высоту, что и уже уменьшенные портретные изображения.

Любая обратная связь по этому вопросу высоко ценится!

Источник

2 ответа

Решение

Вы можете сделать это с помощью комбинации max-height, min-height, white-space а также % рост. Единственный минус в том, что для каждого изображения должен быть установлен класс, чтобы определить, является ли он вертикальным или горизонтальным.

http://jsfiddle.net/Rgp6h/

Пример HTML:

<div>
    <img src="http://placekitten.com/200/300" class="vert"/>
    <img src="http://placekitten.com/500/200" class="horiz"/>
    <img src="http://placekitten.com/200/300" class="vert"/>
    <img src="http://placekitten.com/400/300" class="horiz"/>
    <img src="http://placekitten.com/200/300" class="vert"/>
</div>

CSS:

body,html{
    height: 100%;
}

div{
 white-space: nowrap;
    height: 100%;
}

img{
    min-height: 200px;
    height: 100%;
    vertical-align: top;
}

.horiz{
    max-height: 300px;
}

.vert{
    max-height: 500px;
}
Источник

Я думаю, что они просто используют JavaScript для этого, но вы можете просто использовать процентные размеры или медиа-запросы, если это необходимо.

.coolImg {
    height: 50%;
}
@media all and (max-height: 600px) {
    .coolImg {
        height: 50%;
    }
}

Если вы поделитесь некоторым кодом того, как вы пытались это сделать, мы могли бы попытаться найти решение более конкретно.

Источник
Другие вопросы по тегам