Html 无法调整引导3框的大小以适应图像

请看下面的第一张图片

这是伟大的工作，这是我想要的样子。但是，当浏览器调整大小时，它看起来是这样的

正如您所看到的，文本块的白色背景比图像块的大。我希望图像块与文本块的高度相同，但不幸的是，这不起作用。我正在使用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>

任何帮助都将不胜感激。如您所见，我已经手动定义了上的高度并设置了高度：218px。这显然不会在页面调整大小时动态工作

---

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

好的，这是内在比率，与我的评论不同。但是，有关行、列和嵌套的注释是正确的

演示： 需要：jquery.matchHeight-min.js

安装脚本时的jQuery：

$(document).ready(function() {

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

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

.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

---

此外，您不需要col-md-12围绕col-sm，它会自动这样做，当您嵌套没有行时，它会弄乱您的填充和边距，您不应该使用内联样式。不要在没有围绕12的环绕行的列中插入列—任何添加到12的内容，但在这种情况下，不需要在列周围插入任何col-12-*。

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