Witam 
Moje pytanie jest takie jak ustawić obrazek na całe okno (szerokość i wysokość)?
width: 100%;
Nie działa tak samo jak pobranie wysokości i szerokości okna przez JS.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<link rel="stylesheet" href="pkg/index.css">
<script src="pkg/jquery.min.js"></script>
<script src="pkg/logo.js"></script>
<script src="pkg/menu.js"></script>
<script>
function cycleImages(){
var $active = $('#cycler .active');
var $next = ($active.next().length > 0) ? $active.next() : $('#cycler img:first');
$next.css('z-index',2);
$active.fadeOut(1500,function(){
$active.css('z-index',1).show().removeClass('active');
$next.css('z-index',3).addClass('active');
});
}
$(document).ready(function(){
setInterval('cycleImages()', 7000);
height = $('#wall').width;
width = $('#wall').height;
$('.js_id').css('width', width);
$('.js_id').css('height', height);
alert(height+'|||||||||'+width);
});
</script>
</head>
<body>
<div id="menu">
<div id="menu-icon"></div>
<ul>
<li><a href="kontakt">KONTAKT</a></li>
<li><a href="projekty">PROJEKTY</a></li>
<li><a href="teamspeak">TEAMSPEAK3</a></li>
<li><a href="info">O MNIE</a></li>
</ul>
</div>
<div id="wall">
<div id="cycler">
<img class="js_id active" src="img/1.png"/>
<img class="js_id" src="img/2.png"/>
<img class="js_id" src="img/1.png"/>
<img class="js_id" src="img/2.png"/>
</div>
</div>
</body>
</html>
CSS:
@font-face {
font-family: Roboto;
src: url(roboto-thin.ttf);
}
* {
border: none;
margin: 0px;
padding: 0px;
overflow: hidden;
}
html, body {
width: 100%;
height: 100%;
margin: 0px auto;
font-family: Roboto;
background: RGBA(0, 0, 0, 0);
}
div {
display: inline;
}
#menu {
position: fixed;
width: 100%;
height: 64px;
z-index: 90;
font-family: Roboto;
background: RGBA(0, 0, 0, 0.1);
}
#menu ul, #menu ul>li {
display: block;
float: right;
list-style: none;
}
#menu ul {
width: 100%;
height: 100px;
}
#menu ul>li {
height: 100px;
}
#menu ul>li>a {
display: block;
height: 100px;
color: #797979;
text-decoration: none;
line-height: 70px;
padding: 0px 8px;
font-weight: bold;
}
/*
#menu ul>li>a:hover {
text-shadow: 0px 0px 2px #0BC2FF;
}
*/
#menu-icon {
position: absolute;
top: 10px;
left: 7px;
font-size: 40px;
/*text-shadow: 0px 0px 10px hsl(0, 100%, 50%);*/
}
#wall {
width: 100%;
}
#cycler {
position: relative;
top: 64px;
width: 100%;
height: 90%
}
#cycler img {
position: absolute;
z-index: 1
}
#cycler img.active {
z-index: 3
}
Użytkownik JJay edytował ten post 09 listopada 2014 - 14:26
