すべてのイメージをブートストラップで同じ高さに表示する

Question

4つのイメージすべてが同じ高さのサイズになるようにしようとしていますが、すでにCSSを使って幅と高さで再生しようとしましたが、

<div class="container" > 
    <div class="jumbotron" style="background: rgba(200, 54, 54, 0.0);"> 
     <div class="row"> 
      <div class="col-lg-3 col-md-6 col-sm-12 col-xs-12"> 
       <a href="#"><img class="left-block img-responsive" src="images/genimage.png" width="160" height="160" alt="" /></a> 
       <p style="width: 200px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; ">One Random Item</p> 
       <p>50 €</p> 
      </div> 
      <div class="col-lg-3 col-md-6 col-sm-12 col-xs-12"> 
       <a href="#"><img class="left-block img-responsive" src="images/genimage.png" width="160" height="160" alt="" /></a> 
       <p style="width: 200px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; ">Another Random Item</p> 
       <p>50 €</p> 
      </div> 
      <div class="col-lg-3 col-md-6 col-sm-12 col-xs-12"> 
       <a href="#"><img class="left-block img-responsive" src="images/genimage2.jpg" height="160" width="160" alt="" /></a> 
       <p style="width: 200px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; ">Another another Random Item</p> 
       <p>50 €</p> 
      </div> 
      <div class="col-lg-3 col-md-6 col-sm-12 col-xs-12"> 
       <a href="#"><img class="left-block img-responsive" src="images/genimage.png" width="160" height="160" alt="" /></a> 
       <p style="width: 200px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; ">Any other Random Item Any other Random Item </p> 
       <p>50 €</p> 
      </div> 
     </div> 

これは何が起こるかです：：

このポートレート画像は常に横長のものよりも背が高い終わる、ここのコードです私は（同じ高さを持つすべての）

Answer 1

あなたは幅/高さがHTMLの属性脱いで、CSSでこれを行う可能性を望むものです。明示的に身長を設定し、幅はautoと設定してください。たとえば：

.img-responsive { 
    width: auto; 
    height: 100px; 
} 

あなたは彼らがスケーリングされてきた後、あなたはこれらのイメージのいずれかの正確な幅を知ることができませんので、あなたが水平に十分なスペースを残していることに注意する必要があります。

Answer 2

ここでは、それに対応するための対応方法があります。

.img-wrapper { 
    position: relative; 
    padding-bottom: 100%; 
    overflow: hidden; 
    width: 100%; 
} 
.img-wrapper img { 
    position: absolute; 
    top:0; 
    left:0; 
    width:100%; 
    height:100%; 
} 


<div class="container" > 
    <div class="jumbotron" style="background: rgba(200, 54, 54, 0.0);"> 
     <div class="row"> 
      <div class="col-lg-3 col-md-6 col-sm-12 col-xs-12"> 
       <a href="#" class="img-wrapper"> 
        <img class="left-block" src="images/genimage.png"alt="" /> 
       </a> 
       <p style="width: 200px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; ">One Random Item</p> 
       <p>50 €</p> 
      </div> 
      <div class="col-lg-3 col-md-6 col-sm-12 col-xs-12"> 
       <a href="#" class="img-wrapper"> 
        <img class="left-block" src="images/genimage.png"alt="" /> 
       </a> 
       <p style="width: 200px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; ">Another Random Item</p> 
       <p>50 €</p> 
      </div> 
      <div class="col-lg-3 col-md-6 col-sm-12 col-xs-12"> 
       <a href="#" class="img-wrapper"> 
        <img class="left-block" src="images/genimage.png"alt="" /> 
       </a> 
       <p style="width: 200px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; ">Another another Random Item</p> 
       <p>50 €</p> 
      </div> 
      <div class="col-lg-3 col-md-6 col-sm-12 col-xs-12"> 
       <a href="#" class="img-wrapper"> 
        <img class="left-block" src="images/genimage.png"alt="" /> 
       </a> 
       <p style="width: 200px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; ">Any other Random Item Any other Random Item </p> 
       <p>50 €</p> 
      </div> 
     </div> 

あなたは高さが表示されるようにあなたのイメージを取得するにはIMG-ラッパーのパディング下でビットをプレイしているとあなたがイメージがCOLのない100％を表示したいが、それらのブロックをしたい場合しますラッパーから幅100％を削除し、表示ブロックとカスタム幅を追加することができますが、これはうまくいくはずです。