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

【问题标题】：Resizing an image using Javascript running in Opera Browser使用在 Opera 浏览器中运行的 Javascript 调整图像大小
【发布时间】：2010-12-02 05:51:18
【问题描述】：

我希望有人能帮助解决我在使用 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>

【问题讨论】：

fyi：看到文本编辑器上的按钮，上面有一堆 1 和 0？突出显示您的代码并按下以正确格式化。
调整浏览器窗口大小时它也不起作用。

标签： javascript browser width opera viewport

【解决方案1】：

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

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

【讨论】：

【解决方案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()">

boom.. 你完成了。

【讨论】：

（注意：onresize 属性可以添加到任何 div 中......尽管我从未测试过任何一个）