代码之家 › 专栏 › 技术社区 › Adam Pierce

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

html

Adam Pierce · 技术社区 · 16 年前

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

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

它只会拉伸图像并破坏纵横比。如何解决这个问题,使图像在缩放到最大尺寸时具有正确的纵横比?

韦恩发布的解决方案几乎除了你有一个高的图像和一个宽的窗口。这个代码是对他的代码的一个细微修改,它可以满足我的需要:

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

8 回复 | 直到 7 年前

Wayne 16 年前

这里有一个快速的功能,可以根据哪个更大,将高度或宽度调整到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>

Samir Talwar PruthviRaj Reddy 16 年前

你不一定想向某个更大的方向伸展。例如,我有一个宽屏显示器,所以即使它的图像比它的高还宽,从左到右拉伸它可能仍然会将顶部和底部边缘剪掉。

您需要计算窗口宽度和高度以及图像宽度和高度之间的比率。较小的一个是你的控制轴,另一个是独立的。即使两个轴都大于各自的窗口长度,也是如此。

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

ondovb 12 年前

也可以使用纯CSS使用背景图像和 background-size:contain 财产:

<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更平滑,并且没有安全警告问题。

Caveats:

不 <img> 元素意味着没有上下文菜单和alt文本。
IE支持 背景大小:包含 只有9岁以上,我甚至不能让它在IE9工作(原因不明)。
好像所有的 background-* 必须在与背景图像相同的CSS块中指定属性,因此同一页上的多个图像都需要各自的属性。 contain , no-repeat 和 center .

Franci Penov 16 年前

试试这个:

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

David Smith 16 年前

背上弗朗西·佩诺夫,是的,你只想设置其中一个。如果您有一张宽的图片,您希望将宽度设置为100%,并保留高度。如果您有一张长图片,您需要将高度设置为100%,并保留宽度。

Stephen Wrighton 16 年前

为此,javascript是您的朋友。您要做的是,在页面加载时,遍历DOM,对于每个图像(或者,如果只是一个图像,则传递一个函数一个图像ID),检查图像的哪个属性更大,高度或宽度。

这是图像本身,而不是标签。

一旦你得到了它,那么将标签上相应的高度/宽度设置为100%,另一个设置为自动

一些有用的代码——所有这些都是从我的头顶开始的,所以您的里程可能因语法而异。

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

顺便说一句,在服务器端,这将是一个更简单的任务。在服务器上,你可以真正地改变图像的大小,这些图像被传输到浏览器中。

Andrew Barber Eric Lafortune 12 年前

在IE和火狐上测试,加上第一行将使图像居中:

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

…也可以很好地保留与任何其他尺寸值的纵横比,因此不必再进行烦人的计算=)

Jasper de Vries nndru 7 年前

最简单的方法是设置 object-fit CSS属性 contain :

img { object-fit: contain; }

参见: