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

114

这看似微不足道，但是经过所有的研究和编码，我无法使其正常工作。条件是：

  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中不起作用。

html  css 
— 塞布努克
source
perraultarchitecte.com/en/projects/…这就是您想要的效果，对吗？我也是！
1
是的。我已经在上面发布了解决方案。您可以在eseb.net/potos.php?f=best_of/fort_collins_winter.jpg
— sebnukem 2011年
谢谢，这确实对我有帮助。任何建议我可以做些如何并排放置两个图像，并保持调整大小功能？谢谢。
9
我喜欢您的“非要求”：“我不在乎它是否在IE中不起作用。” :)
— 巴斯蒂安

Answers:

122

更新2018-04-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>

[其他，较旧的]解决方案使用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插件非常相似的解决方案。

— 塞布努克
source
6
不需要JS，只有CSS解决方案。
— Neolisk '16
同样没有JS的人，也可以使用flexbox
— Jason
51

这是一个简单的纯 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>
— 涅利斯克
source
2
真好 但这不是垂直居中。
— sebnukem
1
@sebnukem：应该是吗？我以某种方式错过了需求。这就是为什么人们使用屏幕截图/模型。:) PS我不认为提供的任何答案都可以使它垂直居中，即使有JS帮助也是如此。
— Neolisk '16
3
我已经尝试了很多解决方案，甚至包括css-tricks的解决方案。您的作品就像魅力一样完美！
— 斯蒂芬
2
有史以来最好的解决方案！
— iVela
24

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

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

需要注意的一个问题是，只有在页面上没有其他元素有助于高度的情况下，它才起作用。

— 最高
source
谢谢，太好了。是什么原因100vh让图像不适合但97vh效果良好？
— 帕维尔
也许您还有其他图像会引起高度变化，例如边缘和身体上的填充？vh字面意思是视图的高度，因此，如果任何其他元素为您的页面增加了高度，则整个页面将> 100vh。那有意义吗？
— Max
谢谢，现在解决。如果有人遇到相同的问题（.svg文件呈现效果很好，但是将其重命名为.html会导致不准确）：即使文件没有标签，浏览器也会自动添加<body>默认标签。因此，解决方案正在增加margin:8<body><style>body{margin:0}</style>
— Pavel
15

如果您愿意在图像周围放置一个容器元素，那么纯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%;
}

玩小提琴。

— 马克·E·哈斯
source
您能用<div>而不是用来做到这一点<img>吗？
— StevoHN 2015年
@sebnukem我之前没有注意到这一要求。我已经更新了答案。
— Mark E. Haase
这不会最大化我的宽图像的高度。
— Sridhar Sarnobat '18
4

调整图像尺寸以使其最长的一面适合屏幕，并保持其长宽比

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开始完全受支持

— am0wa
source
1
但是，像该解决方案一样，您应该提到对象适配与仍不幸被广泛使用的IE11不兼容。
— Blackbam
@DivijSehgal那么你不需要object-fit或者你可以明确地使用object-fit: fill;它是默认的。
— am0wa
如果我们想垂直居中怎么办？
— Fmstrat '18年
如果我们想垂直居中怎么办？只需添加：margin：auto;
— 猫
该解决方案与html和body样式一起使用，来自另一个答案：html，body {width：100％; 高度：100％; 边距：0; 填充：0; }
— Ivan Kovtun
3

我一般的懒惰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>
— 用户名
source
3

我知道这里已经有一些答案，但这是我使用的答案：

max-width: 100%;
max-height: 100vh;
width: auto;
margin: auto;
— 汤姆
source
我不知道为什么，但这就像一个魅力。我想解释一下！
— SeedyROM
我都不是，但这是我经过大量搜索后发现的。
— TomC
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％的图像宽度，因为总是需要考虑一些填充。

— 罗希特·维平·马修斯（Rohit Vipin Mathews）
source
2
使用CSS 3，我们可以得到“ vh”和“ vw”单位，分别是视口高度百分比和视口宽度百分比。只需img {最大宽度：95vw; max-height：95vh;}可能就足够了。
— bobpaul
如果您可以将其加起来作为答案，则可能对以后任何人都有用。
— Rohit Vipin Mathews
您也可以在可见区域堆叠多个图像。对于两个图像，将两个img标签放入body页面的中，并设置max-height为49vh。读者可以在可视区域中显示两个以上的图像。
— 安德鲁·比尔斯
2

简单点。谢谢

.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;
}
<div class="bg"></div>
展开摘要

— 哈桑·西迪基（Hassan Siddiqui）
source
谢谢！只需添加style =“ height：80vh;” 在图像标签中帮了我大忙。
— Tobias J.
1 
width: 100%;
overflow: hidden;

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

— 罗宾
source
嗨，谢谢您的回答，但是当图像高度大于窗口时，它在逻辑上不起作用。
— 2011年
1
好吧...您打算做什么？你喜欢拉伸吗？还是应该保留原始比例（我想这就是您想要的）？
— RobinJ 2011年
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>
展开摘要

— 安德鲁·比尔斯
source
0

在样式标签中使用此代码

<style>
html {
  background: url(imagename) no-repeat center center fixed;
  background-size: cover;
  height: 100%;
  overflow: hidden;
}
</style>
— 瓦伊巴夫·洪特
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.