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>
4

2 回答 2

0

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

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

于 2010-12-01T21:31:16.980 回答
0

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

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

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

繁荣..你完成了。

于 2010-12-01T21:51:18.827 回答