Javascript-форум - подгон изображения под размер окна браузера

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - подгон изображения под размер окна браузера (https://javascript.ru/forum/jquery/11473-podgon-izobrazheniya-pod-razmer-okna-brauzera.html)

подгон изображения под размер окна браузера

Здраствуйте недавно начал изучение веб програмированиея и jQuery в частвности. Пытаюсь написать код который берет размеры окна браузера и ставит их размерами изображения, вот что получилось, но не работает, подскажите пожалуйста в чем ошибка, заранее спасибо

var xScroll, yScroll;

if (window.innerHeight && window.scrollMaxY) {
xScroll = document.body.scrollWidth;
yScroll = window.innerHeight + window.scrollMaxY;
} else if (document.body.scrollHeight > document.body.offsetHeight){
xScroll = document.body.scrollWidth;
yScroll = document.body.scrollHeight;
} else if (document.documentElement && document.documentElement.scrollHeight > document.documentElement.offsetHeight){
xScroll = document.documentElement.scrollWidth;
yScroll = document.documentElement.scrollHeight;
} else {
xScroll = document.body.offsetWidth;
yScroll = document.body.offsetHeight;
}

var windowWidth, windowHeight;
if (self.innerHeight) {
windowWidth = self.innerWidth;
windowHeight = self.innerHeight;
} else if (document.documentElement && document.documentElement.clientHeight) {
windowWidth = document.documentElement.clientWidth;
windowHeight = document.documentElement.clientHeight;
} else if (document.body) {
windowWidth = document.body.clientWidth;
windowHeight = document.body.clientHeight;
}

if(yScroll < windowHeight){
pageHeight = windowHeight;
} else {
pageHeight = yScroll;
}

if(xScroll < windowWidth){
pageWidth = windowWidth;
} else {
pageWidth = xScroll;
}

return [pageWidth,pageHeight,windowWidth,windowHeight];

$('#images img').attr("width",windowWidth);
$('#images img').attr("height",pageHeight);

$('#images img').width(windowWidth);
$('#images img').height(pageHeight);

Во-первых, в следующий раз пиши отформатированный код. А во-вторых, если занялся веб програмированием, подбери под себя инструментарий для отлова ошибок. Например, Firebug под FireFox. И сначала сам попробуй все исправить, а не флудить на форуме.

$("#images img").width($(window).width()).height($(window).height())

Но, вообще говоря, тут лучше использовать css.

width: 100%;
height: 100%;

Цитата:

Сообщение от Skipp (Сообщение 68823)

width: 100%;
height: 100%;

…и далее небольшая лекция про то, что размеры элемента определяются от его родителя, или от Initially Containing Block, если такового нет, либо у элемента установлен position: fixed, не включают в себя отбивку и бордюры, а также то, что 100% по высоте от auto — 0. :)

subzey,
эт я вкратце описал решение)))

Ищу скрипт определяющий размер окна браузера коретно во всех основных браузерах в с DOCTYPE и без него, цель таже что в топике растянуть картинку на весь документ ровно не изменяя стили самой страницы.

Цитата:

Сообщение от subzey

$("#images img").width($(window).width()).height($(window).he ight())

Пробовал это решение но по моему оно не работает без

<style  type="text/css">
 body{
        margin: 0px
 }
 </style>

<!DOCTYPE html>
<html>
<head>
  <title></title>
<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){ $("#images").width($(window).width()).height($(window).height()).css({"position": "absolute","left":"0px","top":"0px","margin": "0px"})
  });
</script>
</head>
<body>
 <img id="images" src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" border="0" alt="" />
</body>
</html>

Внизу остаётся незакрытое место.
Буду признателен за решение как на jquery так и без него.
На всякий случай ))) дорогу на гугл и сюда знаю, но может чего не оглядел.
Ссылки по теме:
http://javascript.ru/blog/Andrej-Par...enta-elementov
http://javascript.ru/blog/subzey/Oto...L-kopaem-vglub
http://easywebscripts.net/javascript/height.php
http://www.howtocreate.co.uk/tutoria.../browserwindow

function getViewportSize(doc) {
    doc = doc || document;
    var elem = getRootElement(doc);
    return [elem.clientWidth, elem.clientHeight];
}

function getRootElement(doc) {
    doc = doc || document;
    return doc.compatMode == 'CSS1Compat' ? doc.documentElement : doc.body;
}

Kolyaj,
Спасибо за скрипт но это даёт размер вьюпорта а не размер окна браузера
Внизу снова пусто ...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
<script language="JavaScript" type="text/javascript">
function getViewportSize(doc) {
    doc = doc || document;
    var elem = getRootElement(doc);
    return [elem.clientWidth, elem.clientHeight];
}

function getRootElement(doc) {
    doc = doc || document;
    return doc.compatMode == 'CSS1Compat' ? doc.documentElement : doc.body;
}
</script>
<style type="text/css">
img{
  display: none;
}
</style>
<script type="text/javascript">
function set()
{  div = document.getElementById('div3');
   div.style.position = "absolute";
   div.style.left = "0px";
   div.style.top  = "0px";
   div.style.width= getViewportSize()[0]+"px";
   div.style.height=getViewportSize()[1]+"px";
   div.style.zIndex=-999;
   div.style.display='block';
}
</script>
</head>
<body>
<img id="div3" src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" border="0" alt="" />
<input type="button" name="" value="go"  onclick="set()"/>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</body>
</html>

Цитата:

Сообщение от рони

Спасибо за скрипт но это даёт размер вьюпорта а не размер окна браузера

Размер окна браузера вместе с тулбарами, заголовком и прочим чтоли? Или что вообще надо, какой-то вопрос сумбурный

Цитата:

Сообщение от рони

скрипт определяющий размер окна браузера

Цитата:

Сообщение от рони

растянуть картинку на весь документ

Kolyaj,
Надо перекрыть всю видимую часть боди при этом чтобы скролинг не увеличился
или проще размер боди с отступами
Пример того что хотелось бы получить в результате

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
<style type="text/css">
img{
  display: none;

}
body{
   margin: 0px;
}
</style>
<script type="text/javascript">
function set()
{  div = document.getElementById('div3');
   div.style.position = "absolute";
   div.style.left = "0px";
   div.style.top  = "0px";
   div.style.width= document.body.offsetWidth+"px";
   div.style.height=document.body.offsetHeight+"px";
   div.style.zIndex=-999;
   div.style.display='block';
}
</script>
</head>
<body>
<img id="div3" src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" border="0" alt="" />
<input type="button" name="" value="go"  onclick="set()"/>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</body>
</html>

тоже самое на jquery

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body{
   margin: 0px;
}
</style>
<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){ $("#images").width($(document.body).width()).height($(document.body).height()).css({"position": "absolute","left":"0px","top":"0px","margin": "0px"})
  });
</script>
</head>
<body>
<img id="images" src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" border="0" alt="" />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</body>
</html>

надо получить тотже самый эффект не используя

<style type="text/css">
body{
   margin: 0px;
}
</style>

плюс если боди меньше вьпорта перекрыть весь вьюпорт

Kolyaj,
Благодарю за код по моему вопросу и все остальные скрипты по ссылке

Kolyaj,
Собрал всё вместе вот что получилось ))) ещё раз спасибо!!!

<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
function get(a) {
    var d = document,
        b = d.body,
        e = d.documentElement,
        c = "client" + a;
    a = "scroll" + a;
    return d.compatMode === "CSS1Compat" ? Math.max(e[c], e[a]) : Math.max(b[c], b[a])
};
</script>
</head>
<body>
<input type="button"  value="go"  onclick="alert([get('Width'),get('Height')]);"/>
</body>
</html>