HTML-在保留宽高比的同时显示尽可能大的图像
时间：2020-03-06 15:00:28 来源:igfitidea点击:
我想要一个HTML页面，该页面显示单个PNG或者JPEG图像。我希望图像占据整个屏幕，但是当我这样做时：
<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>
解决方案
试试这个：
<img src="whatever.jpeg" width="100%" height="auto" />
要搭载Franci Penov，是的，我们只想设置其中一个即可。如果图片较宽，则要将宽度设置为100％，并保留高度。如果图像较长，则要将高度设置为100％，并保留宽度。
这是一个快速功能，可以将高度或者宽度调整为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>
为此，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;
顺便说一句，在服务器方面，这将是一件容易得多的任务。在服务器上，我们可以从字面上更改正在浏览器流式传输的图像的大小。
我们不一定要在更大的方向上延伸。例如，我有一个宽屏显示器，所以即使它的图像比它的身高要宽，从左向右拉伸它仍可能会夹住上下边缘。
我们需要计算窗口宽度和高度与图像宽度和高度之间的比率。一个较小的是控制轴，另一个取决于我们。即使两个轴都大于各自的窗口长度，也是如此。
<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>
