使Bootstrap的旋轉木馬既中心又響應？

我希望我的傳送帶圖像處於中心位置（水平），這不是默認設置。我遵循this topic的解決方案。使Bootstrap的旋轉木馬既中心又響應？

但是，使用此解決方案時，傳送帶調整大小並小於圖像時，圖像將被裁剪而不是縮放爲默認值。

我怎樣才能讓我的圖像居中，但保持它伸展到旋轉木馬項目？

2013-10-25 Luke Vo

我假設你有不同大小的圖像。我這個測試自己，因爲你描述（總中心，適當的圖像寬度）

/*CSS*/ 
div.c-wrapper{ 
    width: 80%; /* for example */ 
    margin: auto; 
} 

.carousel-inner > .item > img, 
.carousel-inner > .item > a > img{ 
width: 100%; /* use this, or not */ 
margin: auto; 
} 

<!--html--> 
<div class="c-wrapper"> 
<div id="carousel-example-generic" class="carousel slide"> 
    <!-- Indicators --> 
    <ol class="carousel-indicators"> 
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> 
    <li data-target="#carousel-example-generic" data-slide-to="1"></li> 
    <li data-target="#carousel-example-generic" data-slide-to="2"></li> 
    </ol> 

    <!-- Wrapper for slides --> 
    <div class="carousel-inner"> 
    <div class="item active"> 
     <img src="http://placehold.it/600x400"> 
     <div class="carousel-caption"> 
     hello 
     </div> 
    </div> 
     <div class="item"> 
     <img src="http://placehold.it/500x400"> 
     <div class="carousel-caption"> 
     hello 
     </div> 
    </div> 
    <div class="item"> 
     <img src="http://placehold.it/700x400"> 
     <div class="carousel-caption"> 
     hello 
     </div> 
    </div> 
    </div> 

    <!-- Controls --> 
    <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"> 
    <span class="icon-prev"></span> 
    </a> 
    <a class="right carousel-control" href="#carousel-example-generic" data-slide="next"> 
    <span class="icon-next"></span> 
    </a> 
</div> 
</div>

這將創建一個「跳」因變量的高度......以解決這個問題，嘗試這樣它的工作原理：Select the tallest image of a list

或使用媒體查詢來設置您自己的固定高度。

來源

2013-10-25 07:12:58 Ryan

嘗試給出傳送帶中圖像的寬度（％）？

.item img { 
    width:100%; 
}

來源

2013-10-25 06:54:01 Kevinvhengst

如果你有一個固定的高度，不會讓圖像比身體大。所以圖像會變得粗糙。 –

添加此

.carousel .item img { 
    left: -9999px; /*important */ 
    right: -9999px; /*important */ 
    margin: 0 auto; /*important */ 
    max-width: none; /*important */ 
    min-width: 100%; 
    position: absolute; 
}

當然和家長的div的人都需要有一個位置：相對的，但我相信它的默認操作。

見這裏：http://paginacrestinului.ro/

來源

2014-03-22 19:02:07

添加類每幀圖像的旋轉木馬的HTML代碼，然後用CSS應用margin: 0 auto。

來源

2014-10-22 07:02:42 Escendrix

現在（對自舉3和4）它的簡單：

.carousel-inner img { 
    margin: auto; 
}

來源

2015-02-01 17:17:17 Olivier

2015年7月：在簡單性方面取代已接受答案的最佳答案（Bootstrap 3）。 –

這也適用於bootstrap 4. – Malchesador

謝謝@Malchesador，我更新了答案。 – Olivier

，區別是使用一個CMS，但它並沒有與上述解決方案解決有一個非常類似的問題這一點。我做了什麼來解決它被放在應用CSS如下：

background-size: cover

，並在情況下，你使用的是引導安置的目的，我用：

background-position: center center /* or whatever position you wanted */

來源

2015-07-21 00:42:31

這真的是一個解決方案嗎？ –

我放在裏面的<div class="carousel" id...>與類容器的另一個div（<div class="container"><div class="carousel" id="my-carousel">...</div></div>）。這也解決了它。

來源

2015-08-28 14:33:12 ArtFranco

.carousel-inner > .item > img { 
    margin: 0 auto; 
}

這種簡單的解決方案爲我

來源

2016-01-13 18:41:45 FrickeFresh

通過使用這種自舉3：在引導V4

#carousel-example-generic{ 
    margin:auto; 
}

來源

2016-11-17 04:02:43 Vince2017

，我中心，通過填寫轉盤IMG屏幕

<img class="d-block mx-auto" max-width="100%" max-height="100%">

很確定這需要設置父元素的高度或寬度

html,body{height:100%;} 
.carousel,.carousel-item,.active{height:100%;} 
.carousel-inner{height:100%;}

來源

2016-11-21 05:09:45 austin

On Boostrap 4只需將mx-auto添加到您的傳送帶圖像類。

<div class="carousel-item"> 
    <img class="d-block mx-auto" src="http://placehold.it/600x400" /> 
</div>

根據需要結合bootstrap carousel documentation的樣本。

來源

2017-08-29 09:13:22 rox

使Bootstrap的旋轉木馬既中心又響應？

回答

相關問題