Question

我需要图像处于相同的高度，同时响应，但我不明白如何做到这一点。

<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="container">
    <div class="row" style="text-align: center">
        <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
            <img style="width : 100%" src="https://fbcdn-sphotos-b-a.akamaihd.net/hphotos-ak-frc3/t1/1743484_1417876895127107_960615052_n.jpg" alt="" />
        </div>
        <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
            <img style="width : 100%" src="https://fbcdn-sphotos-g-a.akamaihd.net/hphotos-ak-ash3/t1/1016354_762185537132820_936517474_n.jpg" alt=""  />
        </div>
    </div>
</div>
</div>

http://jsfiddle.net/G26mN/

Answer 1

试试这个：

img {
width: inherit;  /* Make images fill their parent's space. Solves IE8. */
max-width: 100%; /* Add !important if needed. */
height: auto;    /* Add !important if needed. */
}

Answer 2

<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
    <div class="container">
        <div class="row" style="text-align: center">
            <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
            <img class="img-responsive" src="https://fbcdn-sphotos-b-a.akamaihd.net/hphotos-ak-frc3/t1/1743484_1417876895127107_960615052_n.jpg" alt="" />
        </div>
        <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
            <img class="img-responsive" src="https://fbcdn-sphotos-g-a.akamaihd.net/hphotos-ak-ash3/t1/1016354_762185537132820_936517474_n.jpg" alt=""  />
           </div>
        </div>
    </div>
</div>

Bootstrap响应图像高度

2 个答案: