Изменение размера изображения при вертикальном изменении размера окна браузера? - PullRequest
Новая
       2

Изменение размера изображения при вертикальном изменении размера окна браузера?

5 голосов
/ 21 января 2012

У меня есть статьи с display:table и оболочкой для изображений внутри с display:table-cell для достижения вертикального и горизонтального выравнивания изображений. Изображения имеют ширину и высоту 80%, поэтому при изменении размера окна браузера изображение должно масштабироваться в пропорции. 

<article class="layer">
   <div class="wrap">
      <img src="whatever.jpg" alt="image"/>
   </div>
</article>

html, body, #content {
    margin: 0; padding: 0;
    height: 100%;
    width: 100%;
}

article.layer {
    position: relative;
    display: table;
    height: 100%;
    width: 100%;
}

article.layer img {
   max-width: 80%;
   max-height: 80%;
}

div.wrap {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

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

Вот пример: http://jsbin.com/ugumuj/10/edit#preview

Есть ли способ добиться того же при изменении размера окна браузера по вертикали? Я бы хотел сделать это простым способом CSS, но я бы также использовал jQuery или Javascript для этого.

Есть идеи? Заранее спасибо.

1 Ответ

3 голосов
/ 21 января 2012

JavaScript: 

window.onresize = function(){
      $('article.layer img').css({
        maxHeight: $('article.layer').height() * 0.8,
        maxWidth: $('article.layer').width() * 0.8
      });
    };

JQuery: 

$(window).resize(function(){
  $('article.layer img').css({
    maxHeight: $('article.layer').height() * 0.8,
    maxWidth: $('article.layer').width() * 0.8
  });
});

DEMO

...