在任何屏幕上全屏顯示圖像
[英]image full screen on any screen
問題描述
我試圖制作幻燈片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;
}
3 個解決方案
解決方案1
2 2014-09-23 11:32:11
這篇文章提出了幾種技巧。
對於您的場景，這種僅限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%;
}
解決方案2
1 2014-09-23 11:28:46
如果您願意，可以使用此add -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;
}
解決方案3
0 2014-09-23 11:57:19
更新：
我發現這個問題與你的問題非常相似。
實現目標的另一種可能方法是使用Jquery插件：
這是插件的鏈接：
Supersized是使用jQuery庫構建的全屏背景幻燈片。
直道
和
您也可以使用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>
全屏圖像滑塊
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.