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

Posted 2023-03-06

【中文标题】垂直调整浏览器窗口大小时按比例调整图像大小？

【英文标题】：Image resize in ratio when vertically resizing a browser window?

【发布时间】：2012-02-15 18:26:09

【问题描述】：

我有带有display:table 的文章和带有display:table-cell 的图像包装器，以实现图像的垂直和水平对齐。图像设置为 80% 的宽度和高度，因此在调整浏览器窗口大小时，图像应按比例缩放。

<article class="layer">
   <div class="wrap">
      <img src="whatever.jpg" />
   </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】：

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