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

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

  1. 浏览器窗口大小未知。 所以请不要提出一个涉及绝对像素大小的解决scheme。
  2. 我不希望滚动条出现(如果图像适合,他们不应该)。
  3. 该图像可能已经或可能不适合浏览器窗口。 它始终居中。
  4. 图像比例必须保持。
  5. 图像必须全部显示在窗口中(不裁剪)。

基本上我想要的是这样的:

.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引入了相对于视口来衡量的新单位,在这种情况下是窗口。 这些是vhvw ,它们分别衡量视口的高度和宽度。 这是一个简单的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%的图像宽度,因为总是有一些填充被考虑。