如何使幻灯片图像 100% 浏览器的宽度和高度答案

【问题标题】：How to make slideshow images 100% width and height of browser如何使幻灯片图像 100% 浏览器的宽度和高度
【发布时间】：2013-09-01 07:29:13
【问题描述】：

我在这里搜索了相关问题，看来我的情况有点独特。

我有一个 jQuery 幻灯片，我想用纯 CSS 制作 100% 浏览器的宽度和高度。

我能够获得宽度 100% 并通过我的流畅布局使其与页面一起拉伸，但是当我尝试将高度设置为 100% 时，图像完全消失了。

这迫使我用像素定义高度。

我将有一个在图像/背景上拉伸100% 宽度的页脚和页眉，每个内部都有一个960px 宽的包装器。

这是 HTML 结构：

<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>

这是 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;
}

【问题讨论】：

请创建一个jsFiddle：jsfiddle.net
max-height 和 max-width 只是一个约束；他们不设置元素的大小。请改用width 和height，我认为它应该可以工作。
如果你想一直拉伸它，你需要定位 div 内的图像并使用 min-height 。看看这是否有帮助 .revolver-slide img { width:100%;最小高度：100%； }
@afEkenholm 恐怕没用
@Chou 一个也没有工作，很接近

标签： css image fluid-layout

【解决方案1】：

是这样的吗？我放了

    html,body
    {height:100%;
    }

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

【讨论】：