Question

是否可以使用Bootstrap 3并排使用相同高度的2个响应图像？目前col-sm-4的高度不同。

<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/

谢谢！

Answer 1

试试这个：

<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>

Answer 2

这是我的解决方案，带有一个简单的包装器。我们的想法是处理宽高比：

jsfiddle demo

Answer 3

这是一个工作版本，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>

Answer 4

也许你的问题是在你的代码中，填充不考虑。

您的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;    
}

更新：

小提琴：http://jsfiddle.net/Lrc5t/2/

没有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类要删除...（我忘了）......

评论后更新： * 为什么选择45px？ * 图像1是浮动的：左边，所以它只有15px的填充权图像2左右填充为15px {= 30px} 所以为了做相等（获得相同的约束），你需要将总填充传输到图像2

Answer 5

要使图像并排显示，您需要做三件事：

第一：在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个（最重要）：当您将图像放入div中并且此填充与图像或任何其他元素相关联时，CSS具有此属性以自动在左右边缘留下边距/填充你想把它放在div里面。

要解决此问题，请转到css文件，对于每个图像，将左边填充和右边填充设置为0px，如下所示：

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

}


.left-image{

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


}

这是一个工作示例，说明如何使用bootstrap并排放入图像！

Answer 6

检查此代码。此代码将查找图像的最小高度，并将其设置为其他图像的最大高度。图像的其余部分将被隐藏。看看这个。

<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>

Answer 7

如果你想要恒定的高度，应该添加这些属性：

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

或者你想要宽度不变，应该添加这些属性：

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

物体贴合：封面，解决了我的情况下拉伸图像的问题。

Bootstrap 3响应图像并排相同的高度

7 个答案: