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

我想要一个显示单个PNG或JPEG图像的HTML页面。我想让图像占据整个屏幕，但是当我这样做时：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>

来源

2008-10-02 Adam Pierce

这是否使用clientWidth在Firefox等工作，或者它是一个IE浏览器唯一的财产？ – frankster 2011-04-28 12:22:39

这里有一个快速的功能，将高度或宽度调整为100％，具体取决于哪个更大。在FF3测试IE7 &铬

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

来源

2008-10-02 03:03:19 Wayne

这个代码**几乎**可以工作，除非图像高而窗口很宽。我对它做了一个小的修改（我已经添加到原始问题中），将窗口大小考虑在内，现在它做了我想要的。谢谢。 – 2008-10-02 03:20:40

您是否需要将其他方面设置为“自动”以使其工作？还是假定为默认？ – 2008-10-02 03:25:20

试试这个：

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

来源

2008-10-02 02:48:36

如果页面比图像高，但如果图像比页面高，则不起作用，所以它不能解决我的问题。 – 2008-10-02 02:53:49

捎带上弗郎佩诺夫，是的，你只是想将其中一个设置。如果您有宽广的图像，您需要将宽度设置为100％并保留高度。如果您的图片很长，您需要将高度设置为100％并保留宽度。

来源

2008-10-02 02:51:27

为此，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;

顺便说一下，这将是一件更容易的事情在服务器端的事情。在服务器上，您可以从字面上更改流传到浏览器的图像大小。

来源

2008-10-02 03:07:46

你不一定要根据哪个更大的某个方向拉伸。例如，我拥有一台宽屏显示器，因此即使它的图像比较宽，但从左到右依然可能会截断顶部和底部的边缘。

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

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

来源

2008-10-02 03:24:44

测试在IE和Firefox，再加上第一行会的中心图片：

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

...也很大保持纵横比与任何其它大小的值，所以没有更多的烦人的计算=）

来源

2012-08-17 21:22:04 tito76

另外，也可以使用背景图像和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，no-repeat和center。

来源

2012-10-19 18:00:31 ondovb

这样做（如果你不需要支持IE）最简单的方法是object-fit CSS属性设置为contain：

img { object-fit: contain; }

参见：

来源

2018-01-15 19:47:56

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

回答

相关问题