首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何调整图像大小以适应浏览器窗口?

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

Stack Overflow用户
提问于 2011-05-30 02:42:49
回答 15查看 520.5K关注 0票数 143

这看起来微不足道,但在所有的研究和编码之后,我无法让它工作。条件包括:

  1. 浏览器窗口大小未知。因此,请不要提出涉及绝对像素大小的解决方案。
  2. 图像的原始大小未知,可能已经适合浏览器窗口,也可能不适合浏览器窗口。
  3. 图像垂直和水平居中。
  4. 图像比例必须保留。
  5. 图像必须在窗口中完整显示(不得裁剪。)
  6. 我不希望出现滚动条(如果图像适合,则滚动条不应该出现。)
  7. 当窗口尺寸发生变化时,图像会自动调整大小。占用所有可用空间,但不大于其原始大小。

基本上我想要的是:

代码语言:javascript
复制
.fit {
  max-width: 99%;
  max-height: 99%;
}
<img class="fit" src="pic.png">

上面代码的问题是它不工作:图片通过添加一个垂直滚动条获得了它所需的所有垂直空间。

我的选择是PHP,Javascript,JQuery,但是我很想要一个只支持CSS的解决方案。我不关心它是否在IE中不起作用。

EN

回答 15

Stack Overflow用户

回答已采纳

发布于 2013-02-05 06:01:24

更新2018-04-11

这里有一个不使用Javascript,只支持CSS的解决方案。图像将动态居中并调整大小以适合窗口。

代码语言:javascript
复制
<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属性按预期工作。当调整客户端窗口的大小时,图像也会自动调整大小。

代码语言:javascript
复制
<!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插件。

票数 147
EN

Stack Overflow用户

发布于 2016-02-12 01:03:36

这是一个简单的CSS only解决方案(JSFiddle),适用于任何地方,包括移动和IE:

CSS 2.0:

代码语言:javascript
复制
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

img {
    padding: 0;
    display: block;
    margin: 0 auto;
    max-height: 100%;
    max-width: 100%;
}

HTML:

代码语言:javascript
复制
<body>
  <img src="images/your-image.png" />
</body>
票数 65
EN

Stack Overflow用户

发布于 2016-09-27 15:27:07

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

代码语言:javascript
复制
img {
    max-width: 100%;
    max-height: 100vh;
    height: auto;
}

需要注意的是,只有在页面上没有其他元素贡献高度的情况下,它才会起作用。

票数 30
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/6169666

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档