使用在 Opera 浏览器中运行的 Javascript 调整图像大小

发布于 2024-10-05 16:00:22 字数 1986 浏览 4 评论 0原文

我希望有人可以帮助解决我在使用 Opera 浏览器时遇到的这个奇怪问题，我安装了版本 11 Beta，但我怀疑这是 Opera 中的常见问题。

相关网站和页面为 http://www.amigaos.net/index.html。

在 html 正文的底部，我有以下代码，它根据页面加载时视口的宽度调整您在此网页上看到的 3 个图像的大小。在 Safari 和 FireFox 中，代码工作正常，但在 Opera 中，以下涉及调整图像宽度和高度大小的行不起作用：

document.getElementById('img1').width = '475';
document.getElementById('img1').height = '375';

这是完整的代码（抱歉，关于布局，stackoverflow 尚未正确格式化回车符））

<script type="text/javascript">
 function GetWidth()
 {
   var x = 0;
   if (typeof window.innerWidth != 'undefined')
   {
     x = window.innerWidth;
   }
   else if (document.documentElement && document.documentElement.clientHeight)
   {
     x = document.documentElement.clientWidth;
   }
   else if (document.body)
   {
     x = document.getElementsByTagName('body')[0].clientWidth;
   }
   return x;
 }

 width = GetWidth();

 if (width>=1680)
 {
  document.getElementById('img1').width = '475';
  document.getElementById('img1').height = '375';
  document.getElementById('img2').width = '475';
  document.getElementById('img2').height = '375';
  document.getElementById('img3').width = '475';
  document.getElementById('img3').height = '375';
 }
 else if ((width>800) && (width<=1280))
 {
  document.getElementById('img1').width = '300';
  document.getElementById('img1').height = '235';
  document.getElementById('img2').width = '300';
  document.getElementById('img2').height = '235';
  document.getElementById('img3').width = '300';
  document.getElementById('img3').height = '235';
 }
 else if (width<=800)
 {
  document.getElementById('img1').width = '225';
  document.getElementById('img1').height = '195';
  document.getElementById('img2').width = '225';
  document.getElementById('img2').height = '195';
  document.getElementById('img3').width = '225';
  document.getElementById('img3').height = '195';
 }
</script>

原文

I hope someone can help with this quirky issue I am having with the Opera Browser, I have version 11 Beta installed, but I suspect is a common problem in Opera.

The website and page in question is http://www.amigaos.net/index.html.

At the bottom of the body of the html I have the following code which resizes the 3 images you see on this webpage depending on width of the viewport at page load. In Safari and FireFox the code works fine, but in Opera the following lines which involve resizing the width and height of an image do not work:

document.getElementById('img1').width = '475';
document.getElementById('img1').height = '375';

Here is the code in full (sorry, about the layout, stackoverflow hasn't formatted carriage returns correctly)

<script type="text/javascript">
 function GetWidth()
 {
   var x = 0;
   if (typeof window.innerWidth != 'undefined')
   {
     x = window.innerWidth;
   }
   else if (document.documentElement && document.documentElement.clientHeight)
   {
     x = document.documentElement.clientWidth;
   }
   else if (document.body)
   {
     x = document.getElementsByTagName('body')[0].clientWidth;
   }
   return x;
 }

 width = GetWidth();

 if (width>=1680)
 {
  document.getElementById('img1').width = '475';
  document.getElementById('img1').height = '375';
  document.getElementById('img2').width = '475';
  document.getElementById('img2').height = '375';
  document.getElementById('img3').width = '475';
  document.getElementById('img3').height = '375';
 }
 else if ((width>800) && (width<=1280))
 {
  document.getElementById('img1').width = '300';
  document.getElementById('img1').height = '235';
  document.getElementById('img2').width = '300';
  document.getElementById('img2').height = '235';
  document.getElementById('img3').width = '300';
  document.getElementById('img3').height = '235';
 }
 else if (width<=800)
 {
  document.getElementById('img1').width = '225';
  document.getElementById('img1').height = '195';
  document.getElementById('img2').width = '225';
  document.getElementById('img2').height = '195';
  document.getElementById('img3').width = '225';
  document.getElementById('img3').height = '195';
 }
</script>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

时光礼记 2024-10-12 16:00:23

我认为您可以通过 CSS 设置 width: 33% 并自动进行缩放，而不是执行宽度和高度属性，而不管浏览器窗口大小如何。恕我直言，比尝试使用 javascript 更好的解决方案。

这是一个简单的教程： http://haslayout.net/css-tuts/CSS-比例图像比例

回复收藏 0 原文

少钕鈤記 2024-10-12 16:00:23

你把这种方式搞得太复杂了。我不认为你的问题是特定于浏览器的，你只需要重新编码你的脚本。

第一的。我建议使用百分比。不确定您将如何猜测访问者浏览器宽度（以像素为单位）。

假设您的三个可调整大小的图像是浏览器宽度的 20%。所以你的 css 应该是：

#img1, #img2, #img3 {
  width: 20%;
}

现在你的 css 说你的图像占总数的 20%，你就可以添加一些 js 了。请记住，百分比将是其外容器的百分比。

<script type=text/javascript">
  function resizeImages() {
     document.getElementById('img1').style.height = (document.body.clientHeight - 100) * 0.2;
     document.getElementById('img2').style.height = (document.body.clientHeight - 100) * 0.2;
     document.getElementById('img3').style.height = (document.body.clientHeight - 100) * 0.2;
  }
</script>

最重要的是..调用你的函数：

将其添加到你的正文标签中：

<body onresize="resizeImages()">

boom..你就完成了。

you are making this way too complicated. I don't think your issue is browser-specific, you just need to recode your script.

First. I would recommmend using percentages.. Not sure how you will guess the visitors browser width in pixels.

Let's say that your three resizeable images are 20% width of your browser. So your css would be:

#img1, #img2, #img3 {
  width: 20%;
}

now that your css says that your images are 20% of the total with, you're good to add some js. Keep in mind that the percentage will be that of its outer container.

<script type=text/javascript">
  function resizeImages() {
     document.getElementById('img1').style.height = (document.body.clientHeight - 100) * 0.2;
     document.getElementById('img2').style.height = (document.body.clientHeight - 100) * 0.2;
     document.getElementById('img3').style.height = (document.body.clientHeight - 100) * 0.2;
  }
</script>

and most importantly.. call your function:

add this to your body tag: