如何调整图像大小以适应浏览器窗口？
如何调整图像大小以适应浏览器窗口？
提问于 2011-05-30 02:42:49
这看起来微不足道，但在所有的研究和编码之后，我无法让它工作。条件包括：
- 浏览器窗口大小未知。因此，请不要提出涉及绝对像素大小的解决方案。
- 图像的原始大小未知，可能已经适合浏览器窗口，也可能不适合浏览器窗口。
- 图像垂直和水平居中。
- 图像比例必须保留。
- 图像必须在窗口中完整显示(不得裁剪。)
- 我不希望出现滚动条(如果图像适合，则滚动条不应该出现。)
- 当窗口尺寸发生变化时，图像会自动调整大小。占用所有可用空间，但不大于其原始大小。
基本上我想要的是：
.fit {
max-width: 99%;
max-height: 99%;
}
<img class="fit" src="pic.png">上面代码的问题是它不工作:图片通过添加一个垂直滚动条获得了它所需的所有垂直空间。
我的选择是PHP，Javascript，JQuery，但是我很想要一个只支持CSS的解决方案。我不关心它是否在IE中不起作用。
回答 15
Stack Overflow用户
回答已采纳
发布于 2013-02-05 06:01:24
更新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插件。
Stack Overflow用户
发布于 2016-02-12 01:03:36
这是一个简单的CSS only解决方案(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>Stack Overflow用户
发布于 2016-09-27 15:27:07
CSS3引入了相对于视口(在本例中为窗口)测量的新单位。它们是分别测量视口高度和宽度的vh和vw。这是一个简单的纯CSS解决方案：
img {
max-width: 100%;
max-height: 100vh;
height: auto;
}需要注意的是，只有在页面上没有其他元素贡献高度的情况下，它才会起作用。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/6169666
复制相关文章
相似问题
腾讯云开发者
