0

我有一个滑块 WMUslider,我正在尝试使其全屏显示,图像调整为窗口大小,元素调整以适应方面。这在css中应该是可行的,但我无法让它工作。这是页面上唯一的东西,现在你必须向下滚动才能看到整个图像。任何我能得到的帮助我都非常感激,我一直在尝试这样做一段时间,并且开始变得非常沮丧。

这是网站:

http://www.klossal.com/js/wmuSlider/demo/demo3.html

HTML:

<div class="wmuSlider example1">
<div class="wmuSliderWrapper" style="height:100%;">
<article>
<img src="http://www.klossal.com/portfolio/space_1_header.png" />
</article>
<article>
<img src="http://www.klossal.com/portfolio/space_2_header.png" />
</article>
</div>
</div>

CSS

/* Demo */
.wmuSlider,
.wmuGallery {
margin-bottom: 20px;
}

/* mwuSlider */
.wmuSlider {
position: relative;
overflow: hidden;
}
.wmuSlider .wmuSliderWrapper {
display: none;
}
.wmuSlider .wmuSliderWrapper article {
position: relative;
text-align: center;
}
.wmuSlider .wmuSliderWrapper article img {
max-width: 100%;
height: auto;
}

/* mwuGallery */
.wmuGallery .wmuGalleryImage {
position: relative;
text-align: center;
}
.wmuGallery .wmuGalleryImage img {
max-width: 100%;
height: auto;
}

/* Default Skin */
.wmuGallery .wmuGalleryImage {
margin-bottom: 10px;
}
.wmuSliderPrev, .wmuSliderNext {
position: absolute;
width: 40px;
height: 80px;
text-indent: -9999px;
background: url(http://klossal.com/js/wmuSlider/demo/images/sprites.png) no-repeat 0 0;
top: 50%;
margin-top: -40px;
z-index: 2;
}
.wmuSliderPrev {
background-position: 100% 0;
left: 20px;
}
.wmuSliderNext {
right: 20px;
}
.wmuSliderPagination {
z-index: 2;
position: absolute;
left: 50%;
bottom: 0px;
}
.wmuSliderPagination li {
float: left;
margin: 0 5px 0 0;
list-style-type: none;
}
.wmuSliderPagination a {
display: block;
text-indent: -9999px;
width: 10px;
height: 10px;
background: url(http://klossal.com/js/wmuSlider/demo/images/sprites.png) no-repeat 0      
-80px;
}
.wmuSliderPagination a.wmuActive {
background-position: -10px -80px;
}

body{
background:#141414;
}
4

1 回答 1

0

试试 background-size: cover 这将覆盖页面,使其具有屏幕的宽度。

于 2012-07-10T13:14:15.463 回答