gpt4 book ai didi

jquery - HTML 页面在不同浏览器上显示不正确

转载 作者:太空宇宙 更新时间:2023-11-03 18:17:40 24 4
gpt4 key购买 nike

我有以下 html 页面,它从文件中获取 url 并显示它们。调整图像大小以适合屏幕以避免滚动。我的问题是它在 firefox 上显示正确,但 iceweasel 只显示一个空白页面。这让我很困惑,因为我没有在上面找到任何东西。感谢您的帮助。

所有图片的宽度均为 400,高度为 400,但 iceweasal 表示第一张图片的宽度为 0,高度为 19。如果我加载页面并刷新几次,页面会正确显示。

html页面:

<!DOCTYPE HTML>
<html>
<head><style>
.col-md-3 img {
float:left;
}
body {
margin:0px;
}
</style>
<script>
var inRowLimit = 3;

function resizeImgs() {
var images = document.querySelectorAll("img");
var count = images.length;
var rows = 1;
if (count > inRowLimit) {
rows = Math.ceil(count/3);
count = inRowLimit;
}
var maxWidth = Math.floor(window.innerWidth/count);
var maxHeight = window.innerHeight/rows;
for(var i=0; i<=images.length; i++) {
var currW = document.getElementById('img'+i).offsetWidth;
var stretchW = maxWidth/currW;
var currH = document.getElementById('img'+i).offsetHeight;
var stretchH = maxHeight/currH;
if (stretchW <= stretchH)
document.getElementById('img'+i).style.width=currW*stretchW+'px';
} else {
document.getElementById('img'+i).style.height=currH*stretchH+'px';
}
}
}

function go() {
<!--abstracted-->
loadImgs(file);
}

function loadImgs(infile) {
<!--abstracted-->
resizeImgs();
}
window.onload = go
</script>
</head>
<body>
<div id="images">
</div>
</body>
</html>

最佳答案

为什么不使用一些 css 来调整图像的大小?您可以为图像使用 css: .col-md-3 img { 显示: block ; 向左飘浮; 宽度:33.3333%; 最大宽度:100%; 高度:自动; }据我了解你的问题 js 代码调整大小是完全没有必要的。

当浏览器没有完全下载图像时,运行代码似乎会出现问题。您应该在触发窗口加载事件后执行您的代码。

https://developer.mozilla.org/en-US/docs/Web/Reference/Events/load

关于jquery - HTML 页面在不同浏览器上显示不正确,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22474629/

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