событие resize не изменяет размер изображения, как ожидалось

Question

событие resize не изменяет размер изображения, как ожидалось

0

У меня есть изображение, и я устанавливаю его высоту и ширину до 90% размера экрана, пока я загружаю HTML-страницу. Теперь я хочу настроить размер изображения при изменении размера браузера. Ниже мой код -

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function setImageSize() {
     document.getElementById('rockImg').height=(screen.height)*.9;
     document.getElementById('rockImg').width=(screen.width)*.9;
  }
function resizeImageSize() {
     document.getElementById('rockImg').height=(document.body.clientHeight)*.9;
     document.getElementById('rockImg').width=(document.body.clientWidth)*.9;
  }
</script>
</head>
<body onload="setImageSize();" onresize="resizeImageSize();">
<img src="iRock_normal.png" id="rockImg" alt="iRock" onclick="greetByName();" />
</body>
</html>

Проблема в том, что когда я восстанавливаю страницу вниз, размер изображения меняется, как и ожидалось. Однако, когда я максимизирую страницу, высота изображения имеет такой же размер, как при восстановлении страницы. И при каждом восстановлении вниз + Увеличить размер изображения становится все меньше и меньше. Удивительно, но это происходит только по высоте, а не по ширине.

Я делаю что-то неправильно? Как я могу это исправить?

Kartic 28 нояб. 2013, в 01:02

Источник

0

Я использую хром, и он изменяет размер, как и ожидалось.
amenadiel 27 нояб. 2013, в 23:47
0

Это на самом деле не работает для меня, но, похоже, это из-за неправильных расчетов -> jsfiddle.net/2VgHm
adeneo 27 нояб. 2013, в 23:49
0

Я тоже использую хром. Это не работает для меня. Также проверено в IE10. Та же проблема. Пожалуйста, восстановите и уменьшите пару раз.
Kartic 27 нояб. 2013, в 23:50
0

Да, Аденео, вот в чем проблема. Есть ли способ это исправить?
Kartic 27 нояб. 2013, в 23:52
1

Может быть, попробовать это так -> jsfiddle.net/2VgHm/2
adeneo 27 нояб. 2013, в 23:53

Показать ещё 3 комментария

Теги:

javascript

html

resize

1 ответ

Ещё вопросы

Я использую хром, и он изменяет размер, как и ожидалось.
Это на самом деле не работает для меня, но, похоже, это из-за неправильных расчетов -> jsfiddle.net/2VgHm
Я тоже использую хром. Это не работает для меня. Также проверено в IE10. Та же проблема. Пожалуйста, восстановите и уменьшите пару раз.
Да, Аденео, вот в чем проблема. Есть ли способ это исправить?
Может быть, попробовать это так -> jsfiddle.net/2VgHm/2

m59 · Accepted Answer · 2013-11-27T21-51-00.000Z

<img src="iRock_normal.png" id="rockImg" alt="iRock"/>

JavaScript:

var rockImg = document.getElementById('rockImg');

function resize() {
  var height = window.innerHeight*.9;
  var width = window.innerWidth*.9;
  rockImg.height= height;
  rockImg.width= width;
}

window.onload = resize;
window.onresize = resize;

Живой демо здесь (нажмите).

Inline js (onlick и т.д. В вашем html) не является хорошей практикой - он никогда не должен использоваться. Ваш код будет легче отлаживать, если вы сломаете вещи, как я делал выше. Получите высоту, затем примените высоту, чтобы вы могли проверить, какая высота вычисляется. Это показало бы вам, что clientHeight не дал вам того, чего вы ожидали. Кроме того, ваш элемент может быть кэширован в переменной, так что вам не нужно набирать эту длинную функцию, чтобы найти ее и повредить производительность, каждый раз просматривая dom.