如何调整图像大小以适合浏览器窗口？
这看似微不足道，但是经过所有的研究和编码，我无法使其正常工作。条件是：
- 浏览器窗口大小未知。因此，请不要提出涉及绝对像素大小的解决方案。
- 图片的原始尺寸未知，可能适合浏览器窗口，也可能不适合浏览器窗口。
- 图像垂直和水平居中。
- 图像比例必须守恒。
- 图像必须在窗口中完整显示（不裁剪）。
- 我不希望滚动条出现（如果图像合适，它们也不应该出现。）
- 窗口尺寸更改时，图像会自动调整大小，以占据所有可用空间而不会大于其原始大小。
基本上我想要的是：
.fit {
max-width: 99%;
max-height: 99%;
}
<img class="fit" src="pic.png">
上面的代码的问题在于它不起作用：图片通过添加垂直滚动条来获取所需的所有垂直空间。
我可以使用PHP，Javascript，JQuery，但我会选择仅CSS的解决方案。我不在乎它是否在IE中不起作用。
问题答案：
更新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插件非常相似的解决方案。
-
问题内容： 我正在尝试从目录加载图像并将其作为图标放置在中。但是，当图像尺寸很大时，就不能完全放入标签中。我尝试调整图像的大小以适合标签，但无法正常工作。我可以知道我要去哪里了吗？ 问题答案： BufferedImage img = ImageIO.read(…); Image scaled = img.getScaledInstance(500, 500, Image.SCALE_SMOOTH)
-
我使用数组/循环从一个名为gallery（Wordpress）的自定义字段获取图像。检索到的图像未调整大小，这意味着它们的最大宽度为150px，最大高度为150px。现在我想知道如何自动让这些图像适应浏览器的大小。Chrome做得很好，但IE和FF做不到。当我设置img{width:100%；}调整大小是可行的，但是图像本身的大小是错误的，你可以想象得到。 是否有其他可能让图像自动调整到浏览器大小
-
问题内容： 您如何自动调整大图像的大小，以使其适合较小的div容器，同时保持其宽高比？ 示例：当图像插入到编辑器面板上并且图像太大而无法容纳在页面上时，图像将自动调整大小。 问题答案： 请勿对图片标签应用明确的宽度或高度。相反，给它： 另外，如果只想指定宽度。
-
问题内容： 我正在尝试使图片适合JLabel。我希望将图片尺寸减小到更适合我的Swing JPanel。 我尝试使用setPreferredSize，但是它不起作用。 我想知道是否有一种简单的方法？我应该为此缩放图像吗？ 问题答案： 大纲 这是要遵循的步骤。 将图片读取为BufferedImage。 将BufferedImage的大小调整为另一个JLabel大小的BufferedImage。 从调
-
我有下面的代码，它设置了一个特定大小的窗口。它还从外部URL加载图像。
-
问题内容： 我希望在调整浏览器窗口大小时自动调整所有（或部分）图像的大小。我发现了以下代码-尽管它什么也没做。 HTML CSS 在调整浏览器窗口的大小时，如何基本设置全屏设计（带有），并使元素处于完全相同的位置（明智的选择），同时它们的大小也进行调整（就像对背景一样）？ 要使图像灵活，只需添加和。图像并在IE7中有效，但在IE8中无效（是的，另一个怪异的IE错误）。要解决此问题，您需要添加IE8