javascript - Position: absolute making the image take the whole page -
i got slider banner, works perfectly, need put posiiton:absolute put 1 div above another, , when it, ignore width , height designed img, , make img occupate whole screen. me ?
html:
<div class="row"> <div class="eight columns all"> <img src="img/slide_1.jpg" class="hide" id="img-slide"> <img src="img/slide_2.jpg" class="hide" id="img-slide"> <img src="img/slide_3.jpg" class="hide" id="img-slide"> <!--<p>>></p> --> </div> css:
.all img{ margin:15px; height: 95%; width:95%; border-radius:5px; position:absolute; } .all img.show{ opacity:1; left: 0px; -webkit-transition:all 1.0s ease-in-out; -moz-transition:all 1.0s ease-in-out; -o-transition:all 1.0s ease-in-out; transition:all 1.0s ease-in-out; } .all img.hide{ left: -1000px; opacity: 0; -webkit-transition:all 1.0s ease-in-out; -moz-transition:all 1.0s ease-in-out; -o-transition:all 1.0s ease-in-out; transition:all 1.0s ease-in-out; } and js:
function loop() { var listpict = document.getelementsbyclassname('all')[0].children; var old = listpict.length - 1; var current = 0; listpict[current].setattribute('class', 'show'); listpict[old].setattribute('class', 'hide'); old = current; current++; if (current === listpict.length) current = 0; settimeout(loop, 3000); }
in absolute positioning, percentages height , width reflect size of offsetparent, in case <body>. means e.g. width: 95%; 95% of width of page.
you either need define sizes in pixels or give ancestor node, e.g. div.all, relative positioning make offsetparent, sizes bound instead of <body>
div.all { position: relative; }