Bootstrap 3响应式图像并排相同高度答案

【问题标题】：Bootstrap 3 responsive images side by side same heightBootstrap 3响应式图像并排相同高度
【发布时间】：2014-02-09 15:31:39
【问题描述】：

是否可以并排使用 2 个与 Bootstrap 3 相同高度的响应式图像？目前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/

谢谢！

【问题讨论】：

对不起，我忘记添加容器了。 jsfiddle.net/u9av6/3
已添加 =) 尽管为了将来参考，您可以在发布问题后对其进行编辑！

标签： css twitter-bootstrap html twitter-bootstrap-3

【解决方案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>

【讨论】：

这是响应式的：style="max-height:220px"
图片高度小于220px怎么办？

【解决方案2】：

这是我使用简单包装器的解决方案。这个想法是处理纵横比：

jsfiddledemo

【讨论】：

请注意 link-only answers 是不鼓励的，所以答案应该是寻找解决方案的终点（与另一个中途停留的参考相比，随着时间的推移往往会变得陈旧）。请考虑在此处添加独立的概要，并保留链接作为参考。
这正是我所需要的，完美！非常感谢！））

【解决方案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>

【讨论】：

【解决方案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/

没有填充是不好的，只是在右侧图像中添加额外的填充：

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

评论后更新： *为什么是 45 像素？* 图片 1 是 float:left 所以它只有 15px 的 padding-right 图 2 在 15px {=30px} 处左右填充因此，为了做到相等（获得相同的约束），您需要将总填充传输到图像 2

【讨论】：

是的，使用 nopadding 类看起来不错。但是没有填充不是很好...... :(
Jahnux73，这很棒。谢谢！
抱歉，最后一个问题。是否可以将填充设置为30px？我认为它只适用于 45px？
@l00per 我试图在更新我的答案时进行解释......不清楚，但我找不到更好的，对不起......
谢谢！所以我认为不可能将左右图像之间的填充设置为10px，不是吗？

【解决方案5】：

要让图片并排显示，你需要做三件事：

1st：让你的所有图片在 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% 部分。

第三（最重要）：当您将图像放入 div 并且此填充与图像或任何其他元素相关联时，CSS 具有此属性，可以自动在左右两侧保留边距/填充你想放在一个div中。

要解决这个问题，请转到您的 css 文件并为每个图像，将左侧填充和右侧填充设置为 0px，如下所示：

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

}


.left-image{

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


}

这是一个工作示例，并解释了如何使用引导程序并排放置图像！

【讨论】：

【解决方案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>

【讨论】：

【解决方案7】：

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

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

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

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

object-fit：cover，修复了我的情况下图像拉伸的问题。

【讨论】：