Пропорциональный ресайз изображения в ширину и в высоту

artuska

Код, копия на jsfiddle

html,
body {
    height: 100%;
}
.table {
    display: table;
    width: 100%;
    height: 100%;
}
.table__cell {
    display: table-cell;
    vertical-align: middle;
}
img {
    display: block;
    max-width: 100%;
    margin: 0 auto;
}
<div class="table">
    <div class="table__cell">
        
    </div>
</div>

Там использован стандартный прием с display:block; и max-width:100% для изображений:

img {
    display: block;
    max-width: 100%;
}

Если увеличивать/уменьшать ширину контейнера, то изображение уменьшает/увеличивает свою ширину и одновременно пропорционально уменьшает/увеличивает свою высоту. Это очень крутая особенность изображений, много где выручает.

Как сделать так, чтобы при увеличении/уменьшении высоты контейнера, изображение вело себя подобно первому случаю: высота изображения становилась равна высоте контейнера и ширина изображения тоже пропорционально уменьшалась/увеличивалась? Как это сделать без Яваскрипта? (Как сделать с Яваскриптом я знаю.) Можно использовать самые новомодные CSS3 штуки.

2 ответа

artuska

В общем, как оказалось, достаточно всего одного правила и блочный контейнер вокруг, чтобы изображение скейлилось и по высоте — max-height:100%:

img {
    display: block;
    max-width: 100%;
    max-height: 100%;
}

Вот готовенький фиддл. (Естественно, ресайзить нужно жсфиддловский фрейм (ака контейнер)).

Опытным путем было выяснено, что такой ресазй возможен только внутри блочных элементов (например, body). В элементах с display:table и display:table-cell изображение ресайзится только в ширину, а с display:flex не ресайзится вообще никак.

Придется пропорционально ресайзить Яваскриптом.


artuska

Если я правильно понял, то вам надо изменять размер изображения при изменении размеров окна браузера по высоте.

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

В данной ситуации я пока вижу только один выход - это медиа-запросы (@media). Плавного изменения изображения тут ждать не приходиться, хотя некоторую имитацию, всё же сделать можно:

html,
body {
    height: 100%;
}
.table {
    display: table;
    width: 100%;
    height: 100%;
}
.table__cell {
    display: table-cell;
    vertical-align: middle;
    height: 500px;
    -webkit-transition-duration: 2s;
    -moz-transition-duration: 2s;
    -o-transition-duration: 2s;
    transition-duration: 2s;
}
img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    margin: 0 auto;
}
@media (max-height: 600px) {
    .table__cell {
        -moz-transform:  scale(0.7);
        -ms-transform:  scale(0.7);
        -webkit-transform:  scale(0.7);
        -o-transform:  scale(0.7);
        transform:  scale(0.7);
    }
}
<div class="table">
    <div class="table__cell">
        
    </div>
</div>

В примере, изменяйте фрейм.

licensed under cc by-sa 3.0 with attribution.