如何调整图像大小以适应浏览器窗口？
这似乎微不足道，但毕竟研究和编码，我不能得到它的工作。 条件是：
- 浏览器窗口大小未知。 所以请不要提出一个涉及绝对像素大小的解决scheme。
- 我不希望滚动条出现（如果图像适合，他们不应该）。
- 该图像可能已经或可能不适合浏览器窗口。 它始终居中。
- 图像比例必须保持。
- 图像必须全部显示在窗口中（不裁剪）。
基本上我想要的是这样的：
.fit { max-width: 99%; max-height: 99%; } <img class="fit" src="pic.png"> 上面的代码的问题是，它不起作用：PIC通过添加一个垂直滚动条获取所需的所有垂直空间。
在我的处置是PHP，JavaScript，JQuery，但我会杀死一个CSS的唯一解决scheme。 我不在乎，如果它不工作在IE浏览器。
谢谢
这里是我现在使用的最好的解决scheme，使用JQuery，从下面的gutierrezalex答复启发。 这个想法是给图像容器一个高度，以便max-height正如预期的那样工作：
<!DOCTYPE html> <html> <head> <style> * { padding: 0; margin: 0; } .fit { max-width: 100%; max-height: 100%; } .center { display: block; margin: auto; } </style> <script src="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的解决scheme是将高度设置为图像容器（在下面的示例中为body ），以便图像上的max-height属性按预期工作。 客户端窗口resize时，图像也会自动resize。
<!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="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插件的解决scheme。
这里是一个简单的CSS解决scheme（ JSFiddle ），随处可用 ，包括手机和IE：
CSS 2.0：
html, body { height: 100%; margin: 0; padding: 0; } img { padding: 0; display: block; margin: 0 auto; max-height: 100%; max-width: 100%; }
HTML：
<body> <img src="images/your-image.png" /> </body>
CSS3引入了相对于视口来衡量的新单位，在这种情况下是窗口。 这些是vh和vw ，它们分别衡量视口的高度和宽度。 这是一个简单的CSS解决scheme：
img { max-width: 100%; max-height: 100vh; height: auto; }
唯一要注意的是，只有在页面上没有其他元素贡献高度的情况下才有效。
如果你愿意在图像周围放置一个容器元素，纯粹的CSS解决scheme很简单。 你看，当父元素垂直延伸以包含子元素时，99％的高度没有意义。 父母需要有一个固定的高度，比如…视口的高度。
HTML
<!-- use a tall image to illustrate the problem --> <div class='fill-screen'> <img class='make-it-fit' src='https://upload.wikimedia.org/wikipedia/commons/f/f2/Leaning_Tower_of_Pisa.jpg'> </div>
CSS
div.fill-screen { position: fixed; left: 0; right: 0; top: 0; bottom: 0; text-align: center; } img.make-it-fit { max-width: 99%; max-height: 99%; }
玩小提琴 。
我一般的懒惰的CSS规则：
.background{ width:100%; height:auto; background: url('yoururl.jpg') no-repeat center; background-position: 50% 50%; background-size: 100% cover!important; overflow:hidden; }
这可能会放大您的图像，如果它是低分辨率开始（这是关于您的图像质量和尺寸的尺寸。为了居中您的图像，你也可以尝试（在CSS中）
display:block; margin: auto 0;
以图像为中心
在你的HTML中：
<div class="background"></div>
width: 100%; overflow: hidden;
我相信应该做的伎俩。
html, body{width: 99%; height: 99%; overflow: hidden} img.fit{width: 100%; height: 100%;}
或者，也许检查了这一点： http : //css-tricks.com/how-to-resizeable-background-image/
我有一个类似的要求，不得不这样做基本的CSS和JavaScript。 没有可用的JQuery。
这是我的工作。
<html> <head> <style> img { max-width: 95% !important; max-height: 95% !important; } </style> <script> function FitImagesToScreen() { var images = document.getElementsByTagName('img'); if(images.length > 0){ for(int i=0; i < images.length; i++){ if(images[i].width >= (window.innerWidth - 10)){ images[i].style.width = 'auto'; } } } </script> </head> <body onload='FitImagesToScreen()'> ---- </body> </html>
注：我没有使用100％的图像宽度，因为总是有一些填充被考虑。
