调整使用Javascript在Opera浏览器中运行的图像 [英] Resizing an image using Javascript running in Opera Browser

问题描述

我希望有人能与我的Opera浏览器有这个古怪的问题有所帮助，我已经安装的版本11测试版中，但我怀疑是在Opera中普遍存在的问题。

相关网站和网页是 http://www.amigaos.net/index.html

在HTML我有以下的code这重新调整3个图像，您在本网页根据视口的宽度在页面加载看到身体的底部。在Safari和Firefox code工作正常，但在Opera涉及调整图像的宽度和高度以下行不起作用：

 的document.getElementById（'IMG1'）宽度='475';
。的document.getElementById（IMG1'）高度='375';
 

下面是在code全（对不起，有关布局，计算器还没有格式化马车正确返回）

 ＆LT;脚本类型=文/ JavaScript的＆GT;
 功能的getWidth（）
 {
   变种X = 0;
   如果（typeof运算window.innerWidth！=未定义）
   {
     X = window.innerWidth;
   }
   否则，如果（document.documentElement中和放大器;＆安培; document.documentElement.clientHeight）
   {
     X = document.documentElement.clientWidth;
   }
   否则，如果（document.body的）
   {
     X = document.getElementsByTagName（'身体'）[0] .clientWidth;
   }
   返回X;
 } 宽度=的getWidth（）; 如果（宽＆GT; = 1680）
 {
  。的document.getElementById（IMG1'）宽度='475';
  。的document.getElementById（IMG1'）高度='375';
  。的document.getElementById（'IMG2'）宽度='475';
  。的document.getElementById（'IMG2'）高度='375';
  。的document.getElementById（'IMG3'）宽度='475';
  。的document.getElementById（'IMG3'）高度='375';
 }
 否则如果（（宽度GT; 800）及及（宽度LT = 1280））
 {
  。的document.getElementById（IMG1'）宽度='300';
  。的document.getElementById（IMG1'）高度='235';
  。的document.getElementById（'IMG2'）宽度='300';
  。的document.getElementById（'IMG2'）高度='235';
  。的document.getElementById（'IMG3'）宽度='300';
  。的document.getElementById（'IMG3'）高度='235';
 }
 否则，如果（宽＆LT; = 800）
 {
  。的document.getElementById（IMG1'）宽度='225';
  。的document.getElementById（IMG1'）高度='195';
  。的document.getElementById（'IMG2'）宽度='225';
  。的document.getElementById（'IMG2'）高度='195';
  。的document.getElementById（'IMG3'）宽度='225';
  。的document.getElementById（'IMG3'）高度='195';
 }
＆LT; / SCRIPT＆GT;
 

解决方案

您正在这种方式太复杂了。我不认为你的问题是特定浏览器，你只需要重新code你的脚本。

第一。我会recommmend使用百分比..不知道你会怎么猜到的游客浏览器的宽度以像素为单位。

让我们说，你的三个可调整大小的图像浏览器20％的宽度。所以，你的CSS是：

 ＃IMG1，IMG2＃，＃{IMG3
  宽度：20％;
}
 

现在你的CSS说，您的图片占总量的20％，那么你就可以添加一些JS。请记住，这一比例将是它的外容器的。

 ＆LT;脚本类型=文/ JavaScript的＆GT;
  功能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;
  }
＆LT; / SCRIPT＆GT;
 

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

添加到您的身体标记：

 ＆LT;车身在onResize =resizeImages（）＆GT;
 

热潮..你就大功告成了。

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>

解决方案

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:

<body onresize="resizeImages()">

boom.. you're done.

这篇关于调整使用Javascript在Opera浏览器中运行的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！