无法调整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。当页面调整大小时，这显然不会动态。

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

Answer 1

好的，这是内在的比率，它不像我的评论。但是，有关行和列以及嵌套的注释是正确的。

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