如何调整图像大小以适应浏览器窗口？

问题描述：

这似乎微不足道，但毕竟研究和编码，我不能得到它的工作。条件为：

This seems trivial but after all the research and coding I can't get it to work. Conditions are:

浏览器窗口大小未知。因此，请不要提出涉及绝对像素大小的解决方案。

我不希望滚动条出现（如果图像适合，它们不应该出现。）

图片可能或可能不会适合浏览器窗口。

必须保留图片比例。

图片必须完整显示在窗口中

The browser window size is unknown. So please don't propose a solution involving absolute pixel sizes.
I do not wish scrollbars to appear (and they shouldn't if the image fits.)
The image may or may not already fit the browser window. It is always centered.
The image proportions must be conserved.
The image must be displayed in its entirety in the window (no cropping.)

基本上我想要的是：

.fit {
  max-width: 99%;
  max-height: 99%;
}
<img class="fit" src="pic.png">

上面的代码的问题是它不工作：pic需要所有的垂直空间它需要添加一个垂直滚动条。

The problem with the code above is that it doesn't work: the pic takes all the vertical space it needs by adding a vertical scroll bar.

我可以使用PHP，Javascript，JQuery，但我会杀了一个纯CSS解决方案。我不在乎它是否在IE中不起作用。

At my disposal is PHP, Javascript, JQuery but I'd kill for a CSS-only solution. I don't care if it doesn't work in IE.

谢谢

这是目前最好的解决方案，我使用JQuery，灵感来自gutierrezalex回复下面。这个想法是给图像容器一个高度，以便 max-height 正常工作：

Here is the current best solution I have, using JQuery, inspired from gutierrezalex reply below. The idea is to give a height to the image container so that the max-height just works as expected:

<!DOCTYPE html>
<html>
<head>
<style>
* {
  padding: 0;
  margin: 0;
}
.fit {
  max-width: 100%;
  max-height: 100%;
}
.center {
  display: block;
  margin: auto;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" language="JavaScript">
function set_body_height()
{
    var wh = $(window).height();
    $('body').attr('style', 'height:' + wh + 'px;');
}
$(document).ready(function() {
    set_body_height();
    $(window).bind('resize', function() { set_body_height(); });
});
</script>
</head>
<body>
<img id="the_pic" class="center fit" src="pic.jpg" >    
</body>
</html>

答

使用JQuery的解决方案是设置高度到图像容器（在下面的例子中 body ），使得图像上的 max-height 属性预期。当客户窗口调整大小时，图片也会自动调整大小。

The solution, using JQuery, is to set the height to the image container (body in the example below) so that the max-height property on the image just works as expected. The image will also automatically resize when the client window is resized.

<!DOCTYPE html>
<html>
<head>
<style>
  * {
    padding: 0;
    margin: 0;
  }
  .fit { /* set relative picture size */
    max-width: 100%;
    max-height: 100%;
  }
  .center {
    display: block;
    margin: auto;
  }
</style>
</head>
<body>

<img class="center fit" src="pic.jpg" >    

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" language="JavaScript">
  function set_body_height() { // set body height = window height
    $('body').height($(window).height());
  }
  $(document).ready(function() {
    $(window).bind('resize', set_body_height);
    set_body_height();
  });
</script>

</body>
</html>

注意：用户gutierrezalex在此页上打包了一个与JQuery插件非常类似的解决方案。

Note: User gutierrezalex packaged a very similar solution as a JQuery plugin on this page.

如何调整图像大小以适应浏览器窗口？

相关推荐