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

【问题标题】：image full screen on any screen在任何屏幕上全屏显示图像
【发布时间】：2014-09-24 14:07:42
【问题描述】：

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

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

【问题讨论】：

请也发布您的css代码。

标签： jquery html css

【解决方案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%;
}

【讨论】：

这应该是一条评论。你不这么认为吗？
不，我提供了一个解决方案。当您只需单击链接时，我不会复制答案中的所有代码/选项。它也给出了解释。 @HashemQolami
虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接的答案可能会失效。

【解决方案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;
}

【讨论】：

那么image 是什么？
@HashemQolami 不知道他想要哪个 div 的背景图像，所以我给了一个类“图像”忘记在编辑之前将它定义为一个类
@Akshay，我添加了css文件，请检查
@heshamamerican 您可以更改背景大小：200%； to background-size:cover;
@heshamamerican 工作示例jsfiddle.net/tLzxmxc3 删除背景尺寸：封面；看看区别

【解决方案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

【讨论】：

你能告诉我我应该使用多大的图片来适应所有屏幕吗？！
你的尺寸应该是百分比。无论如何，我更新了我的答案。试一试也许对你有帮助。
该解决方案对我没有好处，因为我制作了一个 flibbook 幻灯片而不是背景图像，我想知道填充整个屏幕的图像默认大小？！