HTML - 显示尽可能大的图像，同时保持纵横比
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/160666/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML - display an image as large as possible while preserving aspect ratio
提问by Adam Pierce
I'd like to have an HTML page which displays a single PNG or JPEG image. I want the image to take up the whole screen but when I do this:
我想要一个显示单个 PNG 或 JPEG 图像的 HTML 页面。我希望图像占据整个屏幕，但是当我这样做时：
<img src="whatever.jpeg" width="100%" height="100%" />
It just stretches the image and messes up the aspect ratio. How do I solve this so the image has the correct aspect ratio while scaling to the maximum size possible ?
它只会拉伸图像并弄乱纵横比。如何解决这个问题，使图像在缩放到可能的最大尺寸时具有正确的纵横比？
The solution posted by Wayne almostworks except for the case where you have a tall image and a wide window. This code is a slight modification of his code which does what I want:
韦恩发布的解决方案几乎有效，除非您拥有高大的图像和宽阔的窗口。这段代码是对他的代码的轻微修改，它可以满足我的要求：
<html>
<head>
<script>
function resizeToMax(id){
myImage = new Image()
var img = document.getElementById(id);
myImage.src = img.src;
if(myImage.width / document.body.clientWidth > myImage.height / document.body.clientHeight){
img.style.width = "100%";
} else {
img.style.height = "100%";
}
}
</script>
</head>
<body>
<img id="image" src="test.gif" onload="resizeToMax(this.id)">
</body>
</html>
采纳答案by Wayne
Here's a quick function that will adjust the height or width to 100% depending on which is bigger. Tested in FF3, IE7 & Chrome
这是一个快速功能，可以将高度或宽度调整为 100%，具体取决于哪个更大。在 FF3、IE7 和 Chrome 中测试
<html>
<head>
<script>
function resizeToMax(id){
myImage = new Image()
var img = document.getElementById(id);
myImage.src = img.src;
if(myImage.width > myImage.height){
img.style.width = "100%";
} else {
img.style.height = "100%";
}
}
</script>
</head>
<body>
<img id="image" src="test.gif" onload="resizeToMax(this.id)">
</body>
</html>
回答by Samir Talwar
You don't necessarily want to stretch in a certain direction based on which is bigger. For example, I have a widescreen monitor, so even if it's a wider image than it is tall, stretching it left-to-right may still clip the top and bottom edges off.
您不一定要根据哪个更大的方向在某个方向上拉伸。例如，我有一个宽屏显示器，所以即使它的图像比它的高度更宽，从左到右拉伸它仍然可能会剪掉顶部和底部边缘。
You need to calculate the ratio between the window width and height and the image width and height. The smaller one is your controlling axis - the other is dependent. This is true even if both axes are larger than the respective window length.
您需要计算窗口宽度和高度与图像宽度和高度之间的比率。较小的一个是您的控制轴 - 另一个是相关的。即使两个轴都大于各自的窗口长度，也是如此。
<script type="text/javascript">
// <![CDATA[
function resizeToMax (id) {
var img = document.getElementById(id);
myImage = new Image();
myImage.src = img.src;
if (window.innerWidth / myImage.width < window.innerHeight / myImage.height) {
img.style.width = "100%";
} else {
img.style.height = "100%";
}
}
// ]]>
</script>
回答by ondovb
It is also possible to do this with pure CSS using a background image and the background-size:containproperty:
也可以使用背景图像和background-size:contain属性使用纯 CSS 来做到这一点：
<head>
<style>
#bigPicture
{
width:100%;
height:100%;
background:url(http://upload.wikimedia.org/wikipedia/commons/4/44/CatLolCatExample.jpg);
background-size:contain;
background-repeat:no-repeat;
background-position:center;
}
</style>
</head>
<body style="margin:0px">
<div id="bigPicture">
</div>
</body>
This has the benefit of automatically updating if the container changes aspect ratios, without having to respond to resize events (the Javascript methods, as coded here, can result in cutting off the image when the user resizes the browser). The <embed>method has the same benefit, but CSS is much smoother and has no issues with security warnings.
这具有在容器更改纵横比时自动更新的好处，而无需响应调整大小事件（此处编码的 Javascript 方法可能会导致在用户调整浏览器大小时切断图像）。该<embed>方法具有相同的好处，但 CSS 更流畅，并且没有安全警告问题。
Caveats:
注意事项：
- No
<img>element means no context menu and no alt text. - IE support for
background-size:containis 9+ only, and I couldn't even get this to work in IE9 (for unknown reasons). - It seems like all the
background-*properties have to be specified in the same CSS block as the background image, so multiple images on the same page will each need their owncontain,no-repeat, andcenter.
- 没有
<img>元素意味着没有上下文菜单和替代文本。 - IE
background-size:contain仅支持9+，我什至无法在 IE9 中使用它（原因不明）。 - 好像所有的
background-*属性有相同的CSS块作为背景图像中指定，在同一页上如此多的图像将每一个需要他们自己的contain，no-repeat和center。
回答by Franci Penov
Try this:
尝试这个：
<img src="whatever.jpeg" width="100%" height="auto" />
回答by David Smith
To piggyback on Franci Penov, yes you just want to set one of them. If you have a wide picture, you want to set width to 100% and leave height. If you have a long picture, you want to set height to 100% and leave width.
要搭载 Franci Penov，是的，您只想设置其中之一。如果你有一张宽的图片，你希望将宽度设置为 100% 并保留高度。如果你有一张长图，你想设置高度为100%，保留宽度。
回答by Stephen Wrighton
For this, JavaScript is your friend. What you want to do, is on page load, walk through the dom, and for every image (or alterantively, pass a function an image id if it's just a single image) check if which attribute of the image is greater, it's height or width.
为此，JavaScript 是您的朋友。您想要做的是在页面加载时，遍历 dom，并对于每个图像（或者，如果它只是单个图像，则传递一个图像 id 的函数）检查图像的哪个属性更大，它是高度还是宽度。
This is the IMAGE itself, not the tag.
这是 IMAGE 本身，而不是标签。
Once you got that, then set the corresponding height/width on the tag to 100% and the other to auto
一旦你得到了，然后将标签上相应的高度/宽度设置为 100%，另一个设置为自动
some helpful code--all from off the top of my head, so your mileage may vary on the syntax..
一些有用的代码——全部来自我的头脑，所以你的里程可能会因语法而异..
var imgTag = $('myImage');
var imgPath = imgTag.src;
var img = new Image();
img.src = imgPath;
var mywidth = img.width;
var myheight = img.height;
As an aside, this would be a much easier task on the server side of things. On the server, you could literally change the size of the image that's getting streamed down tot he browser.
顺便说一句，在服务器端，这将是一个更容易的任务。在服务器上，您可以从字面上更改流向浏览器的图像的大小。
回答by Jasper de Vries
The easiest way to do so (if you don't need to support IE) is setting the object-fitCSS property to contain:
最简单的方法（如果您不需要支持 IE）是将object-fitCSS 属性设置为contain：
img { object-fit: contain; }
See also:
也可以看看：
回答by tito76
Tested on IE and Firefox, plus the first line will center image:
在 IE 和 Firefox 上测试，加上第一行将图像居中：
<div align="center">
<embed src="image.gif" height="100%">
... also great to preserve aspect ratio with any other size value, so no more annoying calculations =)
... 用任何其他尺寸值保留纵横比也很好，所以没有更多烦人的计算 =)
