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%;
}

然后，您可以使用.image-wrap将背景图片添加到background-size:cover元素。或者您可以将图片放在.image-wrap内，然后position:absolute;放在.image-wrap内。

Answer 2

一种简单的方法是使用 相同宽度和相同高度的图像！（你避免了很多问题，也没有必要用CSS修复）

<强> HTML

<div class="row">
    <div class="col-sm-3">
        <img src="http://placehold.it/400x300" alt="" class="img-responsive">
        <h3>Heading</h3>
        <p>Text</p>
        <button class="btn">More</button>
    </div>
    <div class="col-sm-3">
        <img src="http://placehold.it/400x300" alt="" class="img-responsive">
        <h3>Heading</h3>
        <p>Text</p>
        <button class="btn">More</button>
    </div>
    <div class="col-sm-3">
        <img src="http://placehold.it/400x300" alt="" class="img-responsive">
        <h3>Heading</h3>
        <p>Text</p>
        <button class="btn">More</button>
    </div>
    <div class="col-sm-3">
        <img src="http://placehold.it/400x300" alt="" class="img-responsive">
        <h3>Heading</h3>
        <p>Text</p>
        <button class="btn">More</button>
    </div>
</div>

Answer 3

回答1：

您必须为img父div设置固定高度，然后将height:100%设置为img下方检查以下代码段：

＆＃13;

.haberImg {
    height: 75px;
}

.haberImg img {
    height: 100%;
    width: 100%;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="row">


  <div class="down-content">
    <div class="haber">


      <!--HABER 1-->
      <div class="col-xs-3">
        <div id="haber1">
          <div id="haberimg1" class="haberImg">
            <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-xs-3">
        <div id="haber2">
          <div id="haberimg2" class="haberImg">
            <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>
    </div>
  </div>

＆＃13;

回答2：

您必须将img父div的固定高度设置为最小的img高度，然后添加overflow:hidden。检查以下代码段：

＆＃13;

.haberImg {
    height: 80px;
    overflow:hidden;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="row">


  <div class="down-content">
    <div class="haber">


      <!--HABER 1-->
      <div class="col-xs-3">
        <div id="haber1">
          <div id="haberimg1" class="haberImg">
            <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-xs-3">
        <div id="haber2">
          <div id="haberimg2" class="haberImg">
            <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>
    </div>
  </div>

＆＃13;

Answer 4

只需为您的图像添加相同的类别并添加高度。

欺骗：避免使用pixels给出高度，因为在小屏幕中出现问题而不是使用rem或 percentage

如何连续生成所有响应图像的相同高度

4 个答案: