Question

我希望有人可以帮助解决我在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>

Answer 1

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

这是一个简单的教程：http://haslayout.net/css-tuts/CSS-Proportional-Image-Scale

Answer 2

你这样做太复杂了。我不认为您的问题是特定于浏览器的，您只需要重新编写脚本。

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

假设您的三个可调整大小的图片的浏览器宽度为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()">

热潮......你已经完成了。

使用在Opera Browser中运行的Javascript调整图像大小

2 个答案: