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

【问题标题】：How to resize an image to fit in the browser window?如何调整图像大小以适合浏览器窗口？
【发布时间】：2011-09-04 09:48:24
【问题描述】：

这似乎微不足道，但经过所有研究和编码后，我无法让它发挥作用。条件是：

浏览器窗口大小未知。所以请不要提出涉及绝对像素大小的解决方案。
图片的原始尺寸未知，可能适合也可能不适合浏览器窗口。
图像垂直和水平居中。
必须保持图像比例。
图像必须在窗口中完整显示（不得裁剪。）
我不希望出现滚动条（如果图像合适，它们也不应该出现。）
当窗口尺寸发生变化时，图像会自动调整大小，以占用所有可用空间而不大于其原始大小。

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

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

上面代码的问题是它不起作用：图片通过添加垂直滚动条占据了它需要的所有垂直空间。

我可以使用 PHP、Javascript、JQuery，但我会为纯 CSS 解决方案而死。我不在乎它是否在 IE 中不起作用。

【问题讨论】：

perraultarchitecte.com/en/projects/… 这就是你想要的效果吧？我也是！
谢谢，这对我很有帮助。有什么建议我可以做些什么来并排放置两个图像，保持调整大小功能？谢谢。
我喜欢你的“非要求”：“我不在乎它是否在 IE 中不起作用。” :)

标签： html css

【解决方案1】：

width: 100%;
overflow: hidden;

我相信这应该可以解决问题。

【讨论】：

您好，感谢您的回答，但是当图像高度大于窗口时，它不会也无法在逻辑上工作。
嗯...你打算做什么？你要拉伸它吗？还是应该保持原始比例不变（我假设这就是你想要的）？

【解决方案2】：

html, body{width: 99%; height: 99%; overflow: hidden}
img.fit{width: 100%; height: 100%;}

或者也许检查一下： http://css-tricks.com/how-to-resizeable-background-image/

【讨论】：

这会裁剪图像，因此不可接受。感谢您的回答。

【解决方案3】：

2018 年 4 月 11 日更新

这是一个无 Javascript、仅 CSS 的解决方案。图像将动态居中并调整大小以适合窗口。

<html>
<head>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .imgbox {
            display: grid;
            height: 100%;
        }
        .center-fit {
            max-width: 100%;
            max-height: 100vh;
            margin: auto;
        }
    </style>
</head>
<body>
<div class="imgbox">
    <img class="center-fit" src='pic.png'>
</div>
</body>
</html>

[other, old] 解决方案使用 JQuery 设置图像容器的高度（以下示例中的 body），以便图像上的 max-height 属性按预期工作。调整客户端窗口大小时，图像也会自动调整大小。

<!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 插件非常相似的解决方案。

【讨论】：

不需要JS，there is a CSS only solution.
同样没有JS，alternatively use flexbox
“*”的样式（因此任何元素！）有点困扰我。这应该改变。

【解决方案4】：

我有类似的要求，并且必须使用基本的 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% 的图像宽度，因为总是需要考虑一些填充。

【讨论】：

使用 CSS 3，我们得到“vh”和“vw”单位，它们分别是视口高度百分比和视口宽度百分比。只需 img { max-width: 95vw; max-height: 95vh;} 可能就足够了。
如果您可以将其添加为答案，可能对以后遇到此问题的任何人都有用。
您还可以在可视区域中堆叠多个图像。对于两张图片，将两个img标签放入页面的body，并将max-height设置为49vh。在可视区域显示两个以上的图像留给读者作为练习。

【解决方案5】：

如果您愿意在图像周围放置一个容器元素，纯 CSS 解决方案很简单。您会看到，当父元素垂直延伸以包含其子元素时，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%;
}

与the fiddle一起玩。

【讨论】：

你能用<div>代替<img>吗？
@sebnukem 我之前没有注意到这个要求。我已经更新了我的答案。
这不会最大化我的宽图像的高度。

【解决方案6】：

这是一个简单的纯 CSS 解决方案 (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>

【讨论】：

不错。但它不是垂直居中的。
@sebnukem：应该是这样吗？不知何故，我在要求中错过了这一点。这就是人们使用屏幕截图/模型的原因。 :)我不认为提供的任何答案都使它垂直居中，即使有 JS 帮助。
我已经尝试了很多解决方案，甚至来自 css-tricks 的解决方案。你的简直就像一个魅力！
有史以来最好的解决方案！

【解决方案7】：

CSS3 引入了相对于视口（在本例中为窗口）测量的新单位。它们是vh 和vw，分别测量视口的高度和宽度。这是一个简单的纯 CSS 解决方案：

img {
    max-width: 100%;
    max-height: 100vh;
    height: auto;
}

对此的一个警告是，它仅在页面上没有其他元素贡献高度的情况下才有效。

【讨论】：

谢谢，太好了。 100vh 不让图像适合但 97vh 效果很好，有什么原因吗？
也许您还有其他图像对高度有贡献，例如身体上的边距和内边距？ vh 字面意思是视图的高度，所以如果任何其他元素将高度添加到您的页面，整个页面将 > 100vh。这有意义吗？
谢谢，现在解决了。如果有人遇到同样的问题（.svg 文件渲染良好，但将其重命名为 .html 会导致不准确）：浏览器会自动添加 <body> 标签，默认为 margin:8，即使文件没有 <body> 标签。所以解决方案是添加<style>body{margin:0}</style>

【解决方案8】：

我的一般惰性 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>

【讨论】：

【解决方案9】：

调整图像大小以适应屏幕最长边保持其纵横比

img[src$="#fit"] {
    width: 100vw;
    height: auto;
    max-width: none;
    max-height: 100vh;
    object-fit: contain;
}

width: 100vw - 图像宽度将是视口的 100%
height: auto - 图片高度将按比例缩放
max-height: 100vw - 如果图像高度超过视口，它将被减小以适应屏幕，因此图像宽度将由于以下属性而减小
object-fit: contain - 被替换的内容被缩放以保持其纵横比，同时适合元素的内容框

注意：object-fit 仅从 IE 16.0 起完全支持

【讨论】：

喜欢那个解决方案，但是你应该提到 object-fit 与 IE11 不兼容，不幸的是，IE11 仍然被广泛使用。
@DivijSehgal 那么你不需要object-fit 或者你可以明确使用object-fit: fill; 这是默认。
如果我们想垂直居中怎么办？
如果我们想垂直居中怎么办？只需添加：margin: auto;
该解决方案与另一个答案的 html 和 body 样式一起使用：html, body { width: 100%;高度：100%；边距：0；填充：0； }

【解决方案10】：

基于@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>

【讨论】：

【解决方案11】：

让它变得简单。谢谢

.bg {
  background-image: url('https://images.unsplash.com/photo-1476820865390-c52aeebb9891?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 100vh;
  width: 100vw;
}

&lt;div class="bg"&gt;&lt;/div&gt;

【讨论】：

谢谢！只需添加 style="height: 80vh;"在图像标签中为我做了诀窍。

【解决方案12】：

我知道这里已经有几个答案了，但这是我用的：

max-width: 100%;
max-height: 100vh;
width: auto;
margin: auto;

【讨论】：

我不知道为什么，但这就像一个魅力。我想要一个解释！
我也没有，但这是我经过大量搜索后发现的。
很棒的答案:)
似乎没有水平居中
是的，哇，很简单，而且能胜任。它仍然不是我所需要的，但我正在调整我的期望。我真正想要的是强制文档不要调整大小以适应太大的图像，而只是简单地将不适合页面顶部的内容推开。我可以通过使用 JS 生成页面来做到这一点，但这对我来说似乎很 hacky，我会喜欢纯 CSS 和语义 HTML 解决方案。

【解决方案13】：

在您的样式标签中使用此代码

<style>
html {
  background: url(imagename) no-repeat center center fixed;
  background-size: cover;
  height: 100%;
  overflow: hidden;
}
</style>

【讨论】：

【解决方案14】：

对于后代，如果您想要一个回答 1-6 并以允许调整大小超出原始大小的方式执行 7 的解决方案，我已经为这个问题开发了一个完整的解决方案：

<!DOCTYPE html>
<html>
  <body style="overflow:hidden; margin:0; text-align:center;">
    <img src="https://file-examples-com.github.io/uploads/2017/10/file_example_JPG_2500kB.jpg" style="height:100vh; max-width:100%; object-fit: contain;">
  </body>
</html>

【讨论】：

【解决方案15】：

我在 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>

【讨论】：