logo标签列表

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

htmlcss
168

这似乎很琐碎，但经过所有的研究和编码后，我无法让它正常工作。条件如下：

  1. 浏览器窗口大小未知。因此，请不要提出涉及绝对像素大小的解决方案。
  2. 图像的原始尺寸未知，并且可能已经适合浏览器窗口。
  3. 图片在垂直和水平方向上居中显示。
  4. 必须保持图像比例。
  5. 图像必须完整地显示在窗口中（不剪裁）。
  6. 我不希望出现滚动条（如果图像适合，则不应出现滚动条）。
  7. 当窗口尺寸更改时，图像会自动调整大小，占用所有可用空间，而不超过其原始大小。

基本上我想要的是：

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

上述代码的问题在于它无法正常工作：图片会通过添加垂直滚动条来占用所有垂直空间。

我可以使用PHP、Javascript、JQuery，但我希望有一个仅基于CSS的解决方案。如果它不能在IE中工作也无所谓。

这是你想要的效果，对吧？我也是！ - user938318
谢谢，那真的帮了我很多。你有什么建议可以让我把两张图片并排放置，同时保持调整大小的功能吗？谢谢。 - user1300142
14
我喜欢你的“非要求”：“我不在乎它在IE上是否能正常工作。” :) - Bastian
15个回答
2

我有一个类似的需求，必须使用基本的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(var 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％，因为总有一点内边距需要考虑。

2
使用CSS 3，我们可以获得“vh”和“vw”单位，它们分别是视口高度百分比和视口宽度百分比。简单地使用img { max-width: 95vw; max-height: 95vh;} 可能就足够了。 - bobpaul
如果您能将它作为答案添加，这对于以后来到这里的任何人都可能有用。 - Rohit Vipin Mathews
您还可以在可视区域中堆叠多个图像。对于两个图像，请将两个“img”标签放入页面的“body”中，并将“max-height”设置为“49vh”。在可视区域中显示超过两个图像留给读者自行练习。 - Andrew Beals
1
2
这会裁剪图像，所以不可接受。谢谢回答。 - sebnukem
1

我在w3上找到了这个纯CSS的解决方案，并且测试过它是有效的。

<!DOCTYPE html>
<html>
<head>
<style>
body, html {
  height: 100%;
  margin: 0;
}

.bg {
  /* The image used */
  background-image: url("../yourimage.jpg");

  /* Full height */
  height: 100%; 

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
</style>
</head>
<body>
    <div class="bg"></div>
</body>
</html>
1
在 @Rohit 的答案基础上，此方法修复了Chrome标记的问题，可靠地调整图像大小，并且还适用于垂直堆叠的多个图像，例如 <img src="foo.jpg"><br><img src="bar.jpg"><br><img src="baz.jpg">。可能有更优雅的方法来实现这个功能。 

<style>
    img {
        max-width: 99vw !important;
        max-height: 99vh !important;
    }
</style>
<script>
    function FitImagesToScreen() {
        var images = document.getElementsByTagName('img');
        if(images.length > 0){
            document.styleSheets[1].rules[0].style["max-height"]=((100/images.length)-1)+"vh";
            for(var i=0; i < images.length; i++){
                if(images[i].width >= (window.innerWidth - 10)){
                    images[i].style.width = 'auto';
                }
            }
        }
    }
</script>
</HEAD>
<BODY onload='FitImagesToScreen()' onresize='FitImagesToScreen()'>
<img src="foo.png">
</BODY>

0
请在您的样式标签中使用此代码。
<style>
html {
  background: url(imagename) no-repeat center center fixed;
  background-size: cover;
  height: 100%;
  overflow: hidden;
}
</style>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接