Изменение размера изображения с использованием Javascript, запущенного в Opera Browser - PullRequest
Новая
       39

Изменение размера изображения с использованием Javascript, запущенного в Opera Browser

0 голосов
/ 02 декабря 2010

Я надеюсь, что кто-то может помочь в решении этой странной проблемы, возникающей у меня с браузером Opera, у меня установлена ​​бета-версия 11, но я подозреваю, что это общая проблема в 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>

Ответы [ 2 ]

0 голосов
/ 02 декабря 2010

вы делаете этот путь слишком сложным.Я не думаю, что ваша проблема связана с браузером, вам просто нужно перекодировать ваш скрипт.

Сначала.Я бы рекомендовал использовать проценты. Не уверен, как вы будете угадывать ширину браузера посетителей в пикселях.

Допустим, что ваши три изображения с изменяемым размером составляют 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()">

бум .. все готово.

0 голосов
/ 02 декабря 2010

вместо использования атрибутов ширины и высоты, я думаю, вы можете просто установить ширину: 33% с помощью CSS, и масштабирование произойдет автоматически, независимо от размера окна браузера. Лучшее решение, чем пытаться использовать JavaScript, ИМХО.

Вот простой урок: http://haslayout.net/css-tuts/CSS-Proportional-Image-Scale

...