Question

我有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来做。

有什么想法吗？提前谢谢。

Answer 1

的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

在垂直调整浏览器窗口大小时，图像会按比例调整大小？

1 个答案: