CSS-Center對齊輪播ng-repeat中的圖像

我正在使用輪播來進行圖像顯示，但是我想將它應用於用戶上傳的所有類型的圖像維度。在將其顯示在旋轉木馬之前，我調整了所有圖像的大小，但我似乎無法將其放入中心。我曾嘗試保證金：汽車/的text-align：中心無論是在李標籤或IMG標籤，但它似乎並沒有爲我工作。以下是轉盤顯示空白空間的一些示例，圖像應顯示在中心。CSS-Center對齊輪播ng-repeat中的圖像

圖片由寬 Image restrained by width

圖片抑制由高度剋制

Image restrained by height

什麼，我想在這裏實現的是使在中央顯示的圖像要麼是受寬度或高度限制。這是我的圖片的呈現方式

<div class="fanpageCarousel" ng-controller="FanCarouselCtrl" 
ng-init="getImage()"> 
<ul rn-carousel rn-carousel-indicator rn-carousel-auto-slide="3" 
    rn-carousel-pause-on-hover="true"> 
    <li ng-repeat="image in slides"><img ng-src="{{image.src}}" /></li> 
</ul>

這些都是我的CSS定製

.fanpageCarousel{ 
    position: relative; 
    margin: auto; 
    padding: 15px; 
    background-color: #ffffff; 
    border: 1px solid #ddd; 
    -webkit-border-radius: 4px; 
    -moz-border-radius: 4px; 
    max-width: 800px; 
    max-height: 450px; 
    border-radius: 4px; 
} 

.fanpageCarousel img{ 
    max-width: 100%; 
    max-height: 400px; 
}

這裏是JSFiddle鏈接

希望有人能給我一些幫助..謝謝你

來源

2014-08-29 Kenny Yap

您能夠創建的jsfiddle證明這個問題？ – 2014-08-29 09:00:53

@HiddenHobbes這裏的JSFiddle鏈接http://jsfiddle.net/5r8jkk56/正如你可以看到，如果我添加不同維度的圖像，你將有空白空間在這裏和那裏......我想要做的就是把所有這些不同的圖像在中心，使它看起來更具有現實感...... – 2014-08-29 10:34:52

使到CSS以下變化：圍繞每個img需要

.fanpageCarousel img { 
    bottom: 0; 
    left: 0; 
    margin: auto; 
    max-height: 100%; 
    max-width: 100%; 
    position: absolute; 
    right: 0; 
    top: 0; 
} 
.fanpageCarousel li { 
    height: 450px; 
    overflow: hidden; 
    position: relative; 
    text-align: center; 
}

總之所述容器（li）被設置爲position: relative;以允許img被定位相對於它。需要在li上專門設置Height才能正常工作。 text-align: center;是舊版瀏覽器的後備版本，至少將中心水平設置爲img。設置position: absolute;,margin: auto;和bottom,left,right和top到0是什麼使img中心在li。

JS小提琴：

http://jsfiddle.net/h82ajq0c/

來源

2014-08-29 10:58:20

非常感謝你的幫助伴侶......你的解釋指導了我對這些旋轉木馬畫廊的實施......乾杯伴侶..祝你有個美好的一天:) – 2014-08-29 12:31:01

CSS-Center對齊輪播ng-repeat中的圖像

回答

相關問題