gpt4 book ai didi

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

转载 作者:技术小花猫 更新时间:2023-10-29 12:04:20 24 4
gpt4 key购买 nike

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

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

它只会拉伸(stretch)图像并弄乱纵横比。我该如何解决这个问题,以便图像在缩放到可能的最大尺寸时具有正确的纵横比?


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>

最佳答案

这是一个快速函数,可以将高度或宽度调整为 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>

关于HTML - 在保持宽高比的同时尽可能大地显示图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/160666/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com