如何獲得響應式圖像以保持等比高度？

我現在在一個網站項目上使用Bootstrap 3。我在使用img-responsive使我的圖像響應時遇到問題。如何獲得響應式圖像以保持等比高度？

我想要的是4個圖像並排放置在一個容器中，它們的高度和比例都與屏幕尺寸相同。

繼Bootstrap網格系統後，我的圖像共佔用了12列。

1 =最左邊的圖像2 =第二圖像3 =第三從左4 =最右邊的圖像

1圖像 - 3 COLS，960×640 2 = 2列，640x640 3 = 4列，1280x640 4 = 3列，960x640的

HTML：

<div class="container"> 
<div class="row"> 
    <div class="col-md-3"> 
    <img class="responsive" src="/image/1.jpg" /> 
    </div> 
    <div class="col-md-2"> 
    <img class="responsive" src="/image/2.jpg" /> 
    </div> 
    <div class="col-md-4"> 
    <img class="responsive" src="/image/3.jpg" /> 
    </div> 
    <div class="col-md-3"> 
    <img class="responsive" src="/image/4.jpg" /> 
    </div> 
</div>

如何確保它們都是一樣的高度，因爲他們規模？現在，所有圖像都具有img響應的類，它們的最大寬度爲100％，高度設置爲自動，並顯示爲塊。

CSS：

.img-responsive { 
    display: block; 
    max-width: 100%; 
    height: auto; 
}

來源

2014-03-30 Zach Cook

u能提原始圖像尺寸是多少？也許在相同高度下，不同的列大小與圖像的寬度不成比例。最好的方法是按比例的百分比和高度給出寬度：自動到圖像 –

@Sagi_Avinash_Varma是的好吧我現在就加入這些！我認爲這可能實際上是問題... –

這個網站真的有幫助。 http://www.helloerik.com/the-subtle-magic-behind-why-the-bootstrap-3-grid-works –

想到另一個更簡單的方法來解決另一個問題時，只需通過添加自定義類來覆蓋col-md- *填充。不需要媒體查詢。

例子：http://www.bootply.com/utGXpeBgE2

HTML

<div class="col-md-2 no-pad"> 
    <img ...

CSS

.no-pad{ 
    padding-left:0px; 
    padding-right:0px; 
}

來源

2014-06-09 06:57:33

時，他們的寬度由下一個圖像收縮您的圖片不完全高度顯示。你需要添加position:absolute來解決這個問題。然而，導致當屏幕下方的COL-MD閾值（992px），所以只添加它時，它上面的，通過方式@media查詢

@media(min-width:992px){ 
    .img-responsive{ 
     position:absolute; 
    } 
}

HTML

<div class="col-md-3"> 
    <img class="img-responsive" src="//placehold.it/960x640/eee"> 
    </div> 

    <div class="col-md-2"> 
    <img class="img-responsive" src="//placehold.it/640x640/ddd"> 
    </div> 

    <div class="col-md-4"> 
    <img class="img-responsive" src="//placehold.it/1280x640/eee"> 
    </div> 

    <div class="col-md-3"> 
    <img class="img-responsive" src="//placehold.it/960x640/ddd"> 
    </div>

參見例如一個問題：http://www.bootply.com/11BDvXAx9y

來源

2014-06-08 17:39:58

如何獲得響應式圖像以保持等比高度？

回答

相關問題