Question

我试图制作幻灯片flibBook但是我无法将照片全屏显示我需要图像来填充屏幕的全宽和高度并且不可滚动，而我尝试使用适合我的屏幕的图像大小但不是所有的屏幕都为我的div编码。

<body>

<div id="flipbook">
    <div class="slide">
        <img src="images/1.jpg" alt="" /> 
    </div>
    <div class="slide">
        <img src="images/2.jpg" alt="" /> 
    </div>
    <div class="slide">
        <img src="images/3.jpg" alt="" /> 
    </div>
    <div class="slide">
        <img src="images/4.jpg" alt="" /> 
    </div>
</div>

</body>

如果有人知道如何在不滚动的情况下使图像填满任何屏幕，请告诉我

css文件：

body {
    margin: 0; 
    padding: 0;
    font-size: 62.5%;
    background: url('polaroid.png');
}


#flipbook {
    padding: 0px;
    margin: 0px auto;
    width: 100%;    
    height: 100%;
    background: #fff;   

}

#flipbook .slide {
    position: absolute;
    top: 0;
    width: 100%;
    overflow: hidden;
    padding: 10px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    left: 0;
}

#flipbook .slide .img {
    width: 50%;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    background-size: 200% !important;
    background-repeat: no-repeat !important;
    -webkit-transition-property: -webkit-transform, box-shadow;
    -webkit-transition-timing-function: linear, linear;
    transition-property: transform, box-shadow;
    transition-timing-function: linear, linear;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

#flipbook {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

#flipbook .prev, #flipbook .next {
    z-index: 999999999;
    position: absolute;
    background: #;
    padding: 20px;
    color: #fff;
    top: 30%;
    width: 64px;
    height: 64px;
    box-sizing: border-box;
    font-size: 2em;
    cursor: pointer;
    background: transparent;
    -moz-box-sizing: border-box;
}

#flipbook .next {
    right: 0px;

}

#flipbook .prev {
    left: 0px;
}

#flipbook .prev:hover, #flipbook .next:hover {
    background: transparent;
}

#flipbook .prev:active {
}

#flipbook .next:active {
}

#flipbook .current {
    z-index: 99999;
}

#flipbook .slide .content {
    position: absolute;
    bottom: -75%;
    z-index: 99999999;
    background: rgba(0,0,0,0.3);
    width: 100%;
    left: 0;
    padding: 20px;
    font-size: 2.2em;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}

#flipbook .slide .content a {
    color: #fff;
}

#flipbook .slide .slideup {
    bottom: 0;
    z-index: 99999999;
}

#pagination {
    position: absolute;
    bottom: 13px;
    right: 12px;
        margin-right:600px;

}

#pagination div {
    background: black;
    width: 16px;
    height: 16px;
    border-radius: 100px;
    float: left;
    cursor: pointer;
    margin: 0 5px 0 0;
}

#pagination .cur {
    background: #42cae8;
    box-shadow: inset 0 3px 7px rgba(0,0,0,0.2);
}

@media screen and (max-width: 1000px) {
    #flipbook {
        width: 100%;
        height: 200px;
        margin: 0;
    }   
    #flipbook .next, #flipbook .prev {
        right: 0;
        top: 0;
        width: 44px;
        height: 44px;
        padding: 10px;
    }

    #flipbook .prev {
        left: 0;
        right: auto;
    }
}

/* ------- IGNORE */

#header {
    width: 100%;
    margin: 0px auto;
}

#header #center {
    text-align: center;
}

#header h1 span {
    color: #000;
    display: block;
    font-size: 50px;
}

#header p {
    font-family: 'Georgia', serif;
}
#header h1 {
    color: #892dbf;
    font: bold 40px 'Bree Serif', serif;
}

#travel {
    padding: 10px;
    background: rgba(0,0,0,0.6);
    border-bottom: 2px solid rgba(0,0,0,0.2);
    font-variant: normal;
    text-decoration: none;
}

#travel a {
    font-family: 'Georgia', serif;
    text-decoration: none;
    border-bottom: 1px solid #f9f9f9;
    color: #f9f9f9;
    font-size: 1.6em;
}

Answer 1

Here is an article提出了几种技巧。

这种仅限CSS的技术似乎是该文章中针对您的方案的最佳选择：

.slide {
  position: fixed; 
  top: -50%; 
  left: -50%; 
  width: 200%; 
  height: 200%;
}

.slide img {
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  margin: auto; 
  min-width: 50%;
  min-height: 50%;
}

Answer 2

如果您愿意，请使用此添加-webkit- -moz- -o-

.slide{
  position: absolute;
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
  background-image: url("...");
  -webkit-background-size: cover;
 -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Answer 3

更新：
我发现这个question与您的问题非常相似。

实现目标的另一种可能方法是使用Jquery插件：

这是插件的链接：

Supersized is a fullscreen background slideshow built using the jQuery library.
BACKSTRETCH

和

您也可以使用CSS

尝试此示例

<强> HTML：

<div class="with-bg-size" style="position:fixed; top:0px; left:0px; z-index:900; width:100%; overflow-y:hidden; overflow-x:hidden; margin:auto;"></div>

<强> CSS：

<style>
  body {height:100%; overflow-y:hidden;}

  .with-bg-size
  {
    background-image: url('PUT-URL-OF-IMAGE-HERE'); --> URL of image
    width: 100%; --> full width the image
    height: 100%; --> full height the image
    background-position: center; --> center the image
    background-size: cover; --> sets the image to fullscreen
    background-repeat:no-repeat; --> you could also add this for not repeating image effect
  }
</style>

工作JSFIDDLE

在任何屏幕上全屏显示图像

3 个答案: