0

我已经设置了一个滑块，我很难让图像全屏显示而不会溢出，以及保持它垂直居中并将导航点保持在屏幕的最底部。

我能得到的任何帮助将不胜感激。

这是网站网址：

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

这是代码，

HTML：

<div style="top:50%;">

<div class="wmuSlider example1">
<div class="wmuSliderWrapper" style="height:100%;">
<article>
<img width="612" height="612" src="http://www.klossal.com/portfolio/space_1_header.png"  
/>
</article>
<article>
<img width="612" height="612" src="http://www.klossal.com/portfolio/space_2_header.png" 
/>
</article>
<article>
<img width="612" height="612"     
src="http://farm6.static.flickr.com/5201/5296457034_5688b25c15_z.jpg" />
</article>
<article>
<img width="612" height="612"    
src="http://farm6.static.flickr.com/5245/5291874922_35ca47cc3d_z.jpg" />
</article>
</div>
</div>


</div>
<script>
    $('.example1').wmuSlider({
        touch: Modernizr.touch,
        animation: 'slide',
        slideshow: false
    });
</script>

和 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: 100%;
}

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

Here's the run down

You have a container -- <div class="wmuSlider"> -- this container has a height of 612px

Then you have a wrapper for your slider images -- <div class="wmuSliderWrapper"> -- this element has a height set to 100%. That means it will use the height of the page wrapper -- <div class="wmuSlider"> -- which is 612px.

So we have no spacing at all yet, we're bound to the exact dimensions of our wrapper. Let's go on.

You have <article>'s, and each <article> has an <img> -- these images have a height of - you guessed it - 612px.

So the images are going to be the same height as all containers around it.

Finally we have <ul class="wmuSliderPagination">. This element is positioned at the bottom of the element <div class="wmuSliderWrapper">. However, because the image has the same height as the wrapper, the <ul class="wmuSliderPagination"> will have any image that spans the full 612px sit beneath it, as per your z-index:2.

If we want to change this, so that the pagination doesn't have any issues, we can do a few things.

We can change the height of the <div class="wmuSliderWrapper"> from 100% to 98% and add overflow:hidden;, such as->

.wmuSliderWrapper{
  height:98%;
  overflow:hidden;
}

However, this will cut off the bottom of the image, we may not want to do that. Instead, we can change the overall height of the <div class="wmuSlider">, and set the height of the <div class="wmuSliderWapper"> to a fixed height.

.wmuSlider{
  height:632px; //20px is the average line-height of a single element
}
.wmuSliderWrapper{
  height:612px;//give 20pxs of room for the pagination wrapper
}

Your <img>'s have hard coded width's and height, so with the above solution, you should never run into that problem again; HOWEVER, if the images vary in height at some point, you would need to include

.wmuSliderWrapper{
  height:612px;
  overflow:hidden; // stop any element that has dimensions larger than the container from overflowing
}
于 2012-07-09T17:04:51.720 回答