подгон изображения под размер окна браузера
Здраствуйте недавно начал изучение веб програмированиея и 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%; |
Цитата:
position: fixed, не включают в себя отбивку и бордюры, а также то, что 100% по высоте от auto — 0. :) |
subzey,
эт я вкратце описал решение))) |
Ищу скрипт определяющий размер окна браузера коретно во всех основных браузерах в с DOCTYPE и без него, цель таже что в топике растянуть картинку на весь документ ровно не изменяя стили самой страницы.
Цитата:
<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>
|
Цитата:
Цитата:
Цитата:
|
| Часовой пояс GMT +3, время: 06:30. |