Twitter Bootstrap旋轉木馬圖像比例

我正在尋找使用bootstrap創建輪播。我希望圖像（具有不同的寬度和高度）以固定的比例顯示，。我嘗試使用CSS的所有內容都會中斷並且圖像比率會中斷並繼承傳送帶的大小。Twitter Bootstrap旋轉木馬圖像比例

CSS

.carousel .item > img { 
position: absolute; 
top: 0; 
left: 0; 
min-width: 100%; 
height: 702px; 
max-width: none;

}

html代碼：

<div id="myCarousel" class="carousel slide"> 
     <div class="carousel-inner"> 
     <div class="active item"> 
     <img src="image1.jpg"/> 
     </div> 
     <div class="item"> 
     <img src="image1.jpg"/> 
     </div> 
     </div> 
    </div>

我應該尋找，保持圖像的比或有解決方法的另一個旋轉木馬的解決方案？

編輯1：

.carousel .item > img { 
     max-width: 100%; 
     height: 100%; 
     width: auto; 
     text-align: center; 
     margin: 0 auto; 

    }

來源

2013-08-02 The Other Guy

你是什麼意思是什麼呢？你想將圖像拉伸到容器大小還是隻填充寬度？ –

是不是你想要做什麼？寬度爲100％，高度如下？

.carousel .item > img { 
    min-width: 100%; 
    height: auto; 
}

來源

2013-08-02 23:22:03 L105

好吧，我解決了這個問題，一個固定的高度和自動寬度。 –

新的系統啓動4旋轉木馬不會兌現height:auto修復，因爲它使用Flexbox的，所以你必須計算比例的元素，在大多數情況下，初始尺寸是未知的高度，所以你必須使用JS來計算或使用位置絕對的圖片並打開蠕蟲新能，但如果你正在尋找一個骯髒的修復，我建議這個

.carousel-item img { 
     width: 100%; 
     height: 68vw; /* play with this */ 
    }

演示https://codepen.io/nodws/pen/gRozMM

來源

2017-06-29 17:15:48 nodws

Twitter Bootstrap旋轉木馬圖像比例

回答

相關問題