如何使連續的所有響應圖像的高度相同

該行的第一張圖像與其他圖像的高度不同。我正在使用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>

引導CSS

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

這是問題：

來源

2017-06-03 Emre

一套最小高度：100％ –

它沒有工作，先生。 – Emre

有許多解決方案。這裏有幾個類似的解決方案。首先，您需要創建一個響應式縮放的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之內。

來源

2017-06-03 14:52:24 WizardCoder

一個簡單的方法是使用具有的相同的寬度和同一高度圖像！（您避免了很多問題，也沒有必要修復與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>

來源

2017-06-03 15:18:09 Sun

答1：

你必須設置一個固定高度的img父母div然後設置height:100%到img檢查以下內容摘要摘要：

.haberImg { 
 
    height: 75px; 
 
} 
 

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

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

答2：

你必須設置一個固定的高度與img父DIV爲最小IMG高度，然後添加overflow:hidden。檢查下面的代碼片段：

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

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

來源

2017-06-03 15:20:58 Bhuwan

只要給你的圖片相同的類並添加高度。

絕招：給予高度避免pixels因爲在小屏幕越來越問題，而不是給予高度與rem或 percentage

來源

2017-06-03 15:47:17 djhru

如何使連續的所有響應圖像的高度相同

回答

相關問題