CODEWITHSUNDEEP
cssimagefluid-layout
Ralph The Mouf
Ralph The Mouf

Reputation: 1007

How to make slideshow images 100% width and height of browser

I have scoured relative questions on here and it seems like my situation is slightly unique.

I have a jQuery slideshow that I am wanting to make 100% width and height of browser with pure CSS.

I am able to get the width 100% and have it stretch with the page via my fluid layout, however when I try to make the height 100% it the image goes away completely.

It is forcing me to define the height with pixels.

I'm going to have a footer and header that stretch 100% width over the image / background with a wrapper inside each that is 960px wide.

Here is HTML structure:

<div class="page-section header clear">

        <div class="wrapper clear">
            <div class="logo clear">

            </div>
        </div>

    </div>

<div class="page-section clear">
<!-- 100% width -->

        <div id="revolver">
            <div class="revolver-slide"><img src="<?php bloginfo('template_directory');?>/img/slides/slide-2.jpg"></div>
            <div class="revolver-slide"><img src="<?php bloginfo('template_directory');?>/img/slides/slide-1.jpg"></div>
            <div class="revolver-slide"><img src="<?php bloginfo('template_directory');?>/img/slides/slide-2.jpg"></div>
            <div class="revolver-slide"><img src="<?php bloginfo('template_directory');?>/img/slides/slide-1.jpg"></div>

        </div>


</div>
    <div class="footer page-section clear">


                    <div class="wrapper">
                        <div class="footer_nav clear">
                            <div class="footer_nav_text">
                                SERIES
                            </div>
                        </div>
                    </div>
        </div>

Here is the CSS:

body {
 min-height:100%;
}
img. {
 max-width:100%;
}
.page-section {
 width:100%;
 height:100%;
 margin:0px auto 0px auto;
}
.wrapper {
 width:960px;
 margin:0px auto 0px auto;
 padding:0px 20px 0px 20px; 
}
/* header */
.header {
 height:27px;
 background-color:#fff;
 position:absolute; top:20px; 
 z-index:100001;
}
#revolver {
 background-color:#ccc;
 max-width:100%;
 max-height:100%;
 z-index:10001;
}

.revolver-slide {
 background-color:#fff;
 max-width:100%;
 max-height:100%;
 background-position:center center;
 -webkit-background-size:cover;
 -moz-background-size:cover;
 -o-background-size:cover;
 background-size:cover;
}
.footer {
     height:25px;
     background-color:#fff;
     z-index:1000001;
     position:relative;
     margin-bottom:15px;
     border:1px #000 solid;
}

Upvotes: 1

Views: 5789

Answers (1)

Bhargav Ponnapalli
Bhargav Ponnapalli

Reputation: 9412

Is it something like this? I have put 

    html,body
    {height:100%;
    }

http://jsfiddle.net/p4z8q/14/

Upvotes: 1

Related Questions