Question

我想要一个显示单个PNG或JPEG图像的HTML页面。我希望图像占据整个屏幕，但是当我这样做时：

<img src="whatever.jpeg" width="100%" height="100%" />

它只是拉伸图像并弄乱纵横比。如何解决这个问题，以便在缩放到可能的最大尺寸时图像具有正确的宽高比？

Wayne 几乎发布的解决方案有效，除了您有高图像和宽窗口的情况。这段代码稍微修改了他的代码，可以实现我的目标：

<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>

Answer 1

这是一个快速功能，可将高度或宽度调整为100％，具体取决于哪个更大。测试在FF3，IE7＆amp;铬

<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>

Answer 2

你不一定要根据哪个更大的方向伸展。例如，我有一个宽屏显示器，所以即使它是一个比它更高的图像，从左到右拉伸它仍然可以剪掉顶部和底部边缘。

您需要计算窗口宽度和高度与图像宽度和高度之间的比率。较小的一个是你的控制轴 - 另一个是依赖的。即使两个轴都大于相应的窗口长度，也是如此。

<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>

Answer 3

使用背景图像和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>

如果容器更改宽高比，则可以自动更新，而不必响应调整大小事件（此处编码的Javascript方法可能会导致在用户调整浏览器大小时切断图像）。 <embed>方法具有相同的优点，但CSS更平滑，并且没有安全警告问题。

注意事项：

没有<img>元素表示没有上下文菜单，也没有替代文字。
对background-size:contain的IE支持仅为9+，我甚至无法在IE9中使用它（原因不明）。
似乎所有background-*属性都必须在与背景图片相同的CSS块中指定，因此同一页面上的多个图片都需要自己的contain，{{1} }和no-repeat。

Answer 4

试试这个：

<img src="whatever.jpeg" width="100%" height="auto" />

Answer 5

搭载Franci Penov，是的，你只想设置其中一个。如果您有宽图片，则需要将宽度设置为100％并保留高度。如果您的照片很长，则需要将高度设置为100％并保留宽度。

Answer 6

为此，JavaScript是你的朋友。您想要做的是，在页面加载，遍历dom，以及每个图像（或者，如果它只是一个图像，通过函数传递图像ID）检查图像的哪个属性更大，它的高度或宽度。

这是IMAGE本身，而不是标签。

一旦你得到了，然后将标签上相应的高度/宽度设置为100％，另一个设置为自动

一些有用的代码 - 全部来自我的头脑，所以你的里程可能因语法而异。

var imgTag = $('myImage'); 
var imgPath = imgTag.src; 
var img = new Image(); 
img.src = imgPath; 
var mywidth = img.width; 
var myheight = img.height;

顺便说一句，在服务器方面，这将是一项更容易的任务。在服务器上，您可以逐字地更改流式传输的图像大小。

Answer 7

在IE和Firefox上测试，加上第一行将居中图像：

<div align="center">
<embed src="image.gif" height="100%">

...也很好地保留宽高比与任何其他大小值，所以不再烦人的计算=）

Answer 8

最简单的方法（如果您不需要支持IE）将object-fit CSS属性设置为contain：

img { object-fit: contain; }

另见：

HTML - 在保留纵横比的同时显示尽可能大的图像

8 个答案: