无法调整 bootstrap 3 框的大小以适合图像

Question

请看下面的第一张图片。

这很好用，也是我想要的样子。但是，当浏览器调整大小时，它看起来像这样。

如您所见，文本块的白色背景比图像块大。我希望图像块与文本块的高度相同，但不幸的是这不起作用。我正在使用 Bootstrap 3 来开发它，您可以在下面看到我的代码：

        <div class="row" style="margin-bottom:30px;">
          <div class="col-xs-12">
              <div class="col-sm-3" style="padding:0;">
                <img src="core/img/abb[square].jpg" class="img-responsive">
              </div>

              <div class="col-sm-9" style="background:#fff; height:218px; padding:7px 25px;">
                <h2><a class="a-cl">Page title</a> <small>2.1 miles away</small></h2>

                <p>Text content, summary of page here.</p>

                <a href="#" class="btn btn-success">Subscribed <i class="glyphicon glyphicon-ok" style="margin-left:4px;"></i></a>
              </div>    
          </div>
        </div>

任何帮助将不胜感激。如您所见，我手动定义了<div class="col-sm-9"> 的高度并设置了height:218px。当页面调整大小时，这显然不会动态工作。

总结：我正在寻找一种有效的方法来确保文本块的高度与使用引导程序 3 的图像块的高度相同。

Answer 1

好的，这是内在比率，它不像我制作的 cmets。但是，关于行列和嵌套的注释是正确的。

演示：http://jsbin.com/zodama/1/

http://jsbin.com/zodama/1/edit

要求：jquery.matchHeight-min.js

• https://github.com/liabru/jquery-match-height

jQuery（安装脚本时）：

$(document).ready(function() {

    $('.my-row [class*="col-"]').matchHeight();
  
}); 

---

CSS，其中一些是纵横比，一些是基于对其工作原理的深入了解的 Bootstrap 网格操作。

.my-row {
    border: 10px solid #ddd;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 3%;
    text-align: center;
}
.image img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}
.my-row [class*="col-"] {
    padding:0 0 10px 0;
}
@media (min-width:768px) { 
    .my-row {
        border: 10px solid #ddd; /* remove this it's in the global */
        text-align: left;
    }
    .my-row [class*="col-"] {
        padding: 0;
        min-height: 220px;
    }
    .my-row [class*="col-"]:last-child {
        padding-left: 20px;
        padding-bottom: 20px;
    }
    .image img {
        display: block;
        width: 100%;
        height: 100%;
        margin: auto;
        -webkit-transition: all 2s ease-out;
        transition: all 2s ease-out;
    }
    .image img {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
    }
    .image {
        position: relative;
        height: 0;
        padding-top: 56.25%;
    }
}


@media (min-width:992px) { 
    .my-row [class*="col-"] {
        min-height: 250px;
    }

}

@media (min-width:1200px) { 
    .my-row [class*="col-"] {
        min-height: 275px;
    }

}

---

HTML

<div class="container">
     <div class="row my-row">
        <div class="col-sm-4 col-md-3 image">
           <img src="http://lorempixel.com/320/320/sports"/>
        </div>
        <div class="col-sm-8 col-md-9">
           <h2><a class="a-cl">Page title</a> <small>2.1 miles away</small></h2>
           <p>Text content, summary of page here.</p>
           <a href="#" class="btn btn-success">Subscribed <i class="glyphicon glyphicon-ok"></i></a>
        </div>
     </div>
 <div class="row my-row">
    <div class="col-sm-4 col-md-3 image">
       <img src="http://lorempixel.com/320/320/city"/>
    </div>
    <div class="col-sm-8 col-md-9">
       <h2><a class="a-cl">Page title</a> <small>2.1 miles away</small></h2>
       <p>Text content, summary of page here.</p>
       <p>Text content, summary of page here.</p>
       <p>Text content, summary of page here.</p>
       <p>Text content, summary of page here.</p>
       <p>Text content, summary of page here.</p>
       <a href="#" class="btn btn-success">Subscribed <i class="glyphicon glyphicon-ok"></i></a>
    </div>
 </div>