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响应式图像并排相同高度

回答

相关问题