Главная > Javascript > Javascript: Изменение размеров объекта при изменении размеров клиентской части окна браузера

Javascript: Изменение размеров объекта при изменении размеров клиентской части окна браузера

25 июня 2010 Написать комментарий К комментариям

В примере мы изменяем ширину картинки в зависимости от размера окна и при ресайзе окна
JS:

function screenSize() {
   var w, h;
   w = (window.innerWidth ? window.innerWidth : (document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.offsetWidth));
   h = (window.innerHeight ? window.innerHeight : (document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.offsetHeight));
   return {w:w, h:h};
}
function ChHgh() {
   var client_width = screenSize().w;
   var content_width = client_width - 200;
   document.getElementById('imageid').style.width = content_width + 'px';
}

где 200 — это суммарная ширина других элементов рядом с картинкой
HTML:

<body onload="ChHgh();" onResize="ChHgh();">
<img id="imageid" src="/path/to/imagename.jpg" alt="imagedesc" />
</body>

Вариант второй простой и кривой:

<div style="width: 100%;"><img src="/images/m2/imagename.jpg" width="100%" /></div>
Categories: Javascript Tags:
  1. devgene
    19 сентября,2012 в 13:42 | #1
    Ответить | Цитата

    трушно!
    спасибо

  2. Лесков
    11 августа,2012 в 01:25 | #2
    Ответить | Цитата

    Спасибо!
    Очень пригодилось и всё заработало с первого раза без допиливания.

  3. Admin
    12 ноября,2011 в 22:44 | #3
    Ответить | Цитата

    Опа :) как раз то чно надо …

  4. Андрюха
    12 ноября,2011 в 21:50 | #4
    Ответить | Цитата

    Очень полезная информация … таки пригодилась … спасибо!

Похожие публикации