Bootstrap 3響應式圖像並排相同高度

是否可以使用2個響應圖像並排，高度相同Bootstrap 3？目前col-sm-4的高度不一樣。Bootstrap 3響應式圖像並排相同高度

<div class="container"> 
    <div class="row">          
     <div class="col-sm-4">     
      <img class="img-responsive" src="http://placehold.it/400x400" /> 
     </div>     
     <div class="col-sm-8"> 
      <img class="img-responsive" src="http://placehold.it/800x400" /> 
     </div>     
    </div> 
</div>

演示小提琴：http://jsfiddle.net/u9av6/3/

謝謝！

來源

2014-01-20 l00per

對不起，我忘了添加容器。 http://jsfiddle.net/u9av6/3/ – l00per

新增=）雖然爲了將來參考，您可以在發佈後編輯問題！ – MackieeE

試試這個：

<div class="col-sm-4"><img src="http://placehold.it/400x400" height="220" /></div> 

<div class="col-sm-8"><img src="http://placehold.it/800x400" height="220" /></div>

來源

2014-01-20 13:10:49 wpdaniel

是的，看起來不錯。但不幸的是沒有迴應。 – l00per

This is responsive：style =「max-height：220px」 – wpdaniel

working version：http://jsfiddle.net/MkP88/ – wpdaniel

也許你的問題是，在你的代碼中，填充不考慮。

你的400px和800px是不錯的，但考慮到填充不好。

在這個小提琴：http://jsfiddle.net/Lrc5t/1/，沒有填充，他們保持相同的高度。但沒有填充不好...

每個.row的填充是15px左右。

HTML：

<div class="row">     
    <div class="col-sm-4 nopadding"><img class="img-responsive" src="http://placehold.it/400x400"></div>      
    <div class="col-sm-8 nopadding"><img class="img-responsive" src="http://placehold.it/800x400"></div>    
</div>

CSS：

.nopadding{ 
    padding-left: 0px !important; 
    padding-right:0px !important;  
}

UPDATE：

小提琴：

沒有paddding是不是很好的話，只是在倒數增加額外填充到右側圖像：

<div class="row"> 

<div class="col-sm-4"><img class="img-responsive" src="http://placehold.it/400x400"></div> 

<div class="col-sm-8 nopadding-two"><img class="img-responsive" src="http://placehold.it/800x400"></div> 

</div> 

.nopadding-two{ 
    padding-right:45px !important; 
}

PS：您可以選擇在左邊，而不是或右邊添加填充...爲了保持中間填充。還有... nopadding-one和text-right類是刪除...（我忘了）... COMMENT

更新後： * 爲什麼×45像素？ * 圖片1是浮動：左所以它只有在15px的{= 30PX} 填充，就在15px的圖片2已經離開填充和右所以爲了做到平等（以獲得相同的約束），你需要總填充發送到圖像2

來源

2014-01-20 12:55:14 pbenard

是的，使用nopadding類看起來很好。但沒有填充是不是很好... :( – l00per

看這裏http://jsfiddle.net/Lrc5t/2/，我更新 – pbenard

Jahnux73，這是偉大的。謝謝！ – l00per

這裏有一個工作版本，jsfiddle demo。

<div class="col-sm-4"><img style="max-height:220px" src="http://placehold.it/400x400" /></div>      
<div class="col-sm-8"><img style="max-height:220px" src="http://placehold.it/800x400" /></div>

來源

2014-01-20 13:20:15 wpdaniel

這是我用一個簡單的包裝的解決方案。的想法是應對寬高比：

jsfiddledemo

來源

2015-10-16 09:18:54 foxdie

請注意，[只有鏈接的答案]（http://meta.stackoverflow.com/tags/link-only-answers/info）不鼓勵，所以答案應該是搜索解決方案的終點（vs.而另一個引用的中途停留時間往往會隨着時間推移而過時）。請考慮在此添加獨立的摘要，並將鏈接保留爲參考。 – kleopatra

這正是我所需要的，完美！非常感謝！）） –

要並排顯示側的圖像，你需要做三件事情：

：讓所有的圖像響應html文件中，像這樣：

<div class="row"> 

     <div class="col-xs-3 left-image" > 

     <img class="img-responsive" src="../img/fourthimg.jpg"> 
     </div> 
     <div class="col-xs-9 right-image"> 

      <img class="img-responsive" src="../img/firstimg.jpg" > 

    </div> 

    </div>

這是爲了把兩個圖像側並排。你可以有儘可能多的圖像。

第二：裏面你的CSS，給予高度這些圖像是這樣的：

.img-responsive {display:block; height: 600px; width: 100%;}

的寬度設置爲100％，這意味着，這兩個（在這個例子中）/所有的圖像將覆蓋在您的html代碼中提供的列寬度的100％部分。

3日（最重要的）： CSS有此屬性自動離開右頁邊距/填充和左，當你把圖像一個div內，該填充與您想要的圖像或任何其他元素相關聯放在一個div裏面。

爲了解決這個問題，去你的CSS文件，併爲每個圖像，設置左填充和右填充爲0px就像這樣：

.right-image{ 
padding-left:0px; 
padding-right:0px; 

} 


.left-image{ 

padding-right: 0px; 
padding-left: 0px; 


}

這是一個工作示例以及如何把解釋並排使用bootstrap的圖像！

來源

2016-10-28 02:25:56 Shubham

檢查此密碼。此代碼將查找圖像的最小高度，並將其設置爲其他圖像的最大高度。圖像的其餘部分將被隱藏。一探究竟。

<script> 
    setTimeout(function() { 
     equalheight('.portfolio-item'); 
    }, 3000); 
    function equalheight($that) { 
     $minHeight = 0; 
     $($that).each(function (index) { 
     $thisHeight = $(this).children('.portfolio-link').innerHeight(); 
     if ($minHeight == 0) { 
      $minHeight = $thisHeight; 
     } else { 
      if ($minHeight > $thisHeight) { 
       $minHeight = $thisHeight; 
      } 
     } 
     }); 
     $($that).children('.portfolio-link').css('max-height', $minHeight); 
     $($that).children('.portfolio-link').css('overflow', 'hidden'); 
    } 
</script>

我的HTML是

   <div class="col-md-4 col-sm-6 portfolio-item"> 
        <a href="#portfolioModal1" class="portfolio-link" data-toggle="modal" style="max-height: 225px; overflow: hidden;"> 
        <div class="portfolio-hover"> 
         <div class="portfolio-hover-content"> 
          <i class="fa fa-plus fa-3x"></i> 
         </div> 
        </div> 
        <img src="images/trip-01.jpg" class="img-responsive" alt=""> 
        </a> 
        <div class="portfolio-caption"> 
        <h4>Round Icons</h4> 
        <p class="text-muted">Graphic Design</p> 
        </div> 
       </div> 
       <div class="col-md-4 col-sm-6 portfolio-item"> 
        <a href="#portfolioModal2" class="portfolio-link" data-toggle="modal" style="max-height: 225px; overflow: hidden;"> 
        <div class="portfolio-hover"> 
         <div class="portfolio-hover-content"> 
          <i class="fa fa-plus fa-3x"></i> 
         </div> 
        </div> 
        <img src="images/trip-02.jpg" class="img-responsive" alt=""> 
        </a> 
        <div class="portfolio-caption"> 
        <h4>Startup Framework</h4> 
        <p class="text-muted">Website Design</p> 
        </div> 
       </div>

來源

2016-11-30 09:41:26

如果你想恆定的高度，應該加上這些屬性：

height: 200x ; # any constant height 
object-fit: cover;

要不然想要寬度不變，要補充這些屬性：

width: 200px ; # any constant height 
object-fit: cover;

物件適合度：封面，修復在我的情況下編輯圖像的伸展問題。

來源

2017-05-12 08:50:44

Bootstrap 3響應式圖像並排相同高度

回答

相關問題