html - 如何使所有响应图像的高度相同

Question

该行的第一张图片与其他图片的高度不同。我正在使用 Bootstrap .img-responsive。

HTML

<div class="row">
    <div class="down-content">
        <div class="haber">
            <!--HABER 1-->
            <div class="col-sm-3">
                <div id="haber1">
                    <div id="haberimg1">
                        <img class="img-responsive" src="http://www.avukatwebsite.net/public/_uploads/photos/temalar/avukat-web-site-tema-1.jpg" >
                    </div>
                    <div id="haberyazi1">
                        <h3>Kanser Affetmedi...</h3>
                        <p>Sanssiz genc Kanser yüzünden öldü...</p>
                        <button type="button" class="btn">Devamini Oku...</button>
                    </div>
                </div>
            </div>
            <!--HABER 2-->
            <div class="col-sm-3">
                <div id="haber2">
                    <div id="haberimg2">
                        <img class="img-responsive" src="http://medicare.bold-themes.com/clinic/wp-content/uploads/sites/2/2015/12/shutterstock_288977717-1200x800.jpg" >
                    </div>
                    <div id="haberyazi2">
                        <h3>Sizofreni Salgini</h3>
                        <p>Türkiyede ki Sizofren sayisinda artis görüldü...</p>
                        <button type="button" class="btn">Devamini Oku...</button>
                    </div>
                </div>
            </div>
            /* we deleted the other parts because of mostly code problem */
        </div>
        <!--HABER BÖLÜMÜ BITIS-->
    </div>
</div>

Bootstrap CSS

.img-responsive,
.thumbnail > img,
.thumbnail a > img,
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
    display: block;
    max-width: 100%;
    height: auto;
}

问题是:

Answer 1

有很多解决方案。这是几个类似的解决方案。首先，您需要创建一个可响应缩放的 div。这可以通过以下方式实现:

.img-wrap {
  height:0;
  // adjust the padding to change the aspect ratio of the div
  padding-bottom:60%;
}

然后您可以使用 background-size:cover 将背景图像添加到 .image-wrap 元素。或者您可以将图像放在 .image-wrap 中，然后将其放在 position:absolute; 中 .image-wrap 并添加 object -适合:覆盖；宽度:100%；高度:100%；。