垂直居中的jQuery WMU滑塊

Question

我已經設置了一個滑塊，很難將圖像全屏顯示而不會溢出，並且使其垂直居中並保持導航點在屏幕的最底部。

我對此能獲得的任何幫助將不勝感激。

這是網站網址：

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

Answer 1

這是敗筆

您有一個容器- <div class="wmuSlider"> -該容器的高度為612px

然后，為滑塊圖像提供了一個包裝器- <div class="wmuSliderWrapper"> -此元素的高度設置為100％。 這意味着它將使用頁面包裝程序的高度- <div class="wmuSlider"> -的高度為612px。

因此，我們還沒有任何間距，我們必須綁定到包裝的確切尺寸。 我們繼續。

您有<article> ，並且每個<article>都有一個<img> -這些圖像的高度（您猜對了）為612px 。

因此，圖像將與周圍的所有容器具有相同的高度。

最后，我們有了<ul class="wmuSliderPagination"> 。 該元素位於元素<div class="wmuSliderWrapper">的底部。 但是，由於圖像的高度與包裝器的高度相同，因此根據您的z-index:2 ， <ul class="wmuSliderPagination">將具有位於其下方整個612px任何圖像。

如果要更改此設置，以使分頁沒有任何問題，我們可以做一些事情。

我們可以將<div class="wmuSliderWrapper">的高度從100%更改為98%並添加overflow:hidden; ，例如->

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

但是，這會切斷圖像的底部，我們可能不想這樣做。 取而代之的是，我們可以改變的總高度<div class="wmuSlider">和的高度設定<div class="wmuSliderWapper">到一個固定的高度。

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

您的<img>具有硬編碼的寬度和高度，因此使用上述解決方案，您永遠都不會再遇到這個問題； 但是，如果圖像的高度在某些時候有所不同，則需要包括

.wmuSliderWrapper{
  height:612px;
  overflow:hidden; // stop any element that has dimensions larger than the container from overflowing
}