如何在div中以不同的大小放置幻燈片圖像

我已經設置了jQuery Cycle的幻燈片放映，但是我的所有圖像都以不同的大小居中。寬度較小的圖像顯示在div的左側，高度較低的圖像顯示在div的頂部。我試過margin：0 auto;顯示：塊; text-align：center;但似乎沒有任何工作。我嘗試設置最小寬度或最小高度，但它仍然不起作用。它可能很簡單，我忽略了，或者它可能是jQuery與CSS衝突？任何提示將非常感激。這裏是我的意思樣本：http://jiyongart.com/Test-centerImage 如何在div中以不同的大小放置幻燈片圖像

我的HTML：

<div id="slideshowWrapper"> 
<div id="slideshowImages" class="slideshow"> 
    <img src="image1.jpg" width="530" height="530"/> 
    <img src="image2.jpg" width="530" height="530"/> 
    <img src="image3.jpg" width="530" height="530"/> 
    <img src="image4.jpg" width="395" height="530"/> 
    <img src="image5.jpg" width="530" height="106"/> 
</div> 
</div>

我的CSS：

#slideshowWrapper { 
height: 586px; 
width: 730px; 
position: relative; 
float: left; 
padding-top: 55px; 
text-align:center; 
color: #999; 
} 
#slideshowImages { 
background-color: #FFF; 
font-family: Arial, Helvetica, sans-serif; 
font-size: 12px; 
color: #A1A1A1; 
position: relative; 
width: 530px; 
margin: 0 auto; 
top: 0; 
text-align: center; 
} 
#slideshowImages img { 
margin: 0 auto; 
display: block; 
text-align: center; 
min-width: 395px; 
    max-height: 106px 
} 
.slideshow { 
    margin: 0 auto; 
position: absolute; 
overflow: visible; 
text-align: center; 
}

jQuery的週期：

$(document).ready(function() { 
$('.slideshow').cycle({ 
fx: 'fade', // choose your transition type, ex: fade, scrollUp, shuffle, etc... 
speed: 1000, 
timeout: 10000, 
next: '.slideshow', 
pause: 1, 
pager: '#thumbnavigator', 
slideExpr: 'img', 
before: function() { 
     $('#caption').html(this.alt); 
      }, 

// callback fn that creates a thumbnail to use as pager anchor 
pagerAnchorBuilder: function(idx, slide) { 
    return '<li><a href="#"><img src="' + slide.src + '" width="40" height="40" /></a></li>'; 
} 
});

JSFiddle here

來源

2014-05-13 bdesign

似乎是非常複雜的，因爲你正在使用的是這個畫廊覆蓋位置和內聯風格。在你的代碼中也有很多次使用id =「slideimage」一個id只能使用一次（使用類代替） – caramba

感謝Caramba的JSFiddle。我清理了代碼並刪除了id =「slideimage」和其他不必要的jQuery腳本。更新JSFiddle [鏈接]（http://jsfiddle.net/bdesign/6kf4m/5/）如果jQuery循環覆蓋的位置，有沒有辦法解決這個jQuery內？ – bdesign

使用CSS來中心的所有圖像的每個大小是這樣的：

http://jsfiddle.net/NicoO/fw9qg/

.slideshow 
{ 
    width: 530px; 
    height: 530px; 
    background-color: silver; 
    text-align: center; 
} 
.slideshow img { 
    display: inline-block; 
    vertical-align: middle; 
} 
.slideshow:after { 
    display: inline-block; 
    vertical-align: middle; 
    content: ""; 
    height: inherit; 
}

像這樣的圖像將始終處於.slideshow元素的中心。

來源

2014-05-13 08:36:53

謝謝尼科。不幸的是，你建議的CSS不起作用。請在這裏查看CSS框中的第26-41行：http://jsfiddle.net/bdesign/6kf4m/5/ 我插入了你的CSS，但它不起作用。正如@ caramba所說，jQuery可能導致衝突嗎？ – bdesign

是的，你是對的@bdesign。問題是，圖像被設置爲「position：absolute」。我上面的解決方案可以處理靜態/相對圖像。 –

如何在div中以不同的大小放置幻燈片圖像

回答

相關問題