高さを追加するとブーツラップイメージが反応しません。

Question

レスポンシブイメージを作成しようとしていますが、写真の高さを設定すると直ちに反応しなくなりました。

彼らは以下でも

を見ることができますので、誰もが、誰も私はイメージが応答することができます方法を知っているが、セットの高さを持っているかもしれないが、私のコードに私のリンクです。

https://jsfiddle.net/eldan88/DTcHh/37485/#&togetherjs=evQgLr6sQz

すべてのヘルプは本当にいただければ幸いです。ありがとう！

/* Latest compiled and minified CSS included as External Resource*/ 
 

 

 
/* Optional theme */ 
 

 
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css'); 
 
body { 
 
    margin: 10px; 
 
} 
 

 
.card { 
 
    /* Add shadows to create the "card" effect */ 
 
    border: 1px solid rgba(0, 0, 0, .125); 
 
    transition: 0.3s; 
 
    border-radius: .25rem; 
 
} 
 

 

 
/* Add some padding inside the card container */ 
 

 
.card-container { 
 
    padding: 1.25rem; 
 
} 
 

 
.img-responsive { 
 
    height: 180px !important; 
 
}

<div class="row"> 
 

 
    <div class="col-sm-3"> 
 

 
    <div class="card"> 
 
     <div> 
 
     <img src="https://aspenpeak-magazine.com/get/files/image/migration/11670_content_robert-deniro-aspen-peak-1-1.jpg" class="img-responsive"> 
 
     </div> 
 

 
     <div class="card-container"> 
 
     <h4><b>Rober Dinero</b></h4> 
 
     <p>Architect &amp; Engineer</p> 
 
     </div> 
 
    </div> 
 

 
    </div> 
 
    <div class="col-sm-3"> 
 

 
    <div class="card"> 
 
     <div> 
 
     <img src="https://www.biography.com/.image/t_share/MTE1ODA0OTcxODYwOTg1MzU3/mark-wahlberg-9542335-1-402.jpg" class="img-responsive"> 
 
     </div> 
 

 
     <div class="card-container"> 
 
     <h4><b>Mark Whalberg</b></h4> 
 
     <p>Architect &amp; Engineer</p> 
 
     </div> 
 
    </div> 
 

 
    </div> 
 
    <div class="col-sm-3"> 
 

 
    <div class="card"> 
 
     <div> 
 
     <img src="http://res.cloudinary.com/wphire/image/upload/c_scale/freelancer_profile_pic_3" class="img-responsive"> 
 
     </div> 
 

 
     <div class="card-container"> 
 
     <h4><b>Jonah Hill</b></h4> 
 
     <p>Architect &amp; Engineer</p> 
 
     </div> 
 
    </div> 
 

 
    </div> 
 
    <div class="col-sm-3"> 
 

 
    <div class="card"> 
 
     <div> 
 
     <img src="http://res.cloudinary.com/wphire/image/upload/c_scale/freelancer_profile_pic_4" class="img-responsive"> 
 
     </div> 
 

 
     <div class="card-container"> 
 
     <h4><b>Seth Rogan</b></h4> 
 
     <p>Architect &amp; Engineer</p> 
 
     </div> 
 
    </div> 
 

 
    </div> 
 

 
</div>

Answer 1

わかりましたので、これは何をしたいです！

注：これは使用しているブートストラップクラスです。ブートストラップスタイルシートを正しく実装する場合は、divに正しいクラスを追加するだけで問題ありません。

/* Latest compiled and minified CSS included as External Resource*/ 
 

 

 
/* Optional theme */ 
 

 
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css'); 
 
body { 
 
    margin: 10px; 
 
} 
 

 
.card { 
 
    /* Add shadows to create the "card" effect */ 
 
    border: 1px solid rgba(0, 0, 0, .125); 
 
    transition: 0.3s; 
 
    border-radius: .25rem; 
 
} 
 

 

 
/* Add some padding inside the card container */ 
 

 
.col-sm-3{ 
 
    display: inline-block; 
 
    width: 25%; 
 
    vertical-align: top; 
 
} 
 

 
.card-container { 
 
    padding: 1.25rem; 
 
} 
 

 
.img-responsive { 
 
    display: block; 
 
    height:auto; 
 
    max-width: 100%; 
 
}

<div class="row"> 
 

 
    <div class="col-sm-3"> 
 

 
    <div class="card"> 
 
     <div> 
 
     <img src="https://aspenpeak-magazine.com/get/files/image/migration/11670_content_robert-deniro-aspen-peak-1-1.jpg" class="img-responsive"> 
 
     </div> 
 

 
     <div class="card-container"> 
 
     <h4><b>Rober Dinero</b></h4> 
 
     <p>Architect &amp; Engineer</p> 
 
     </div> 
 
    </div> 
 

 
    </div> 
 
    <div class="col-sm-3"> 
 

 
    <div class="card"> 
 
     <div> 
 
     <img src="https://www.biography.com/.image/t_share/MTE1ODA0OTcxODYwOTg1MzU3/mark-wahlberg-9542335-1-402.jpg" class="img-responsive"> 
 
     </div> 
 

 
     <div class="card-container"> 
 
     <h4><b>Mark Whalberg</b></h4> 
 
     <p>Architect &amp; Engineer</p> 
 
     </div> 
 
    </div> 
 

 
    </div> 
 
    <div class="col-sm-3"> 
 

 
    <div class="card"> 
 
     <div> 
 
     <img src="http://res.cloudinary.com/wphire/image/upload/c_scale/freelancer_profile_pic_3" class="img-responsive"> 
 
     </div> 
 

 
     <div class="card-container"> 
 
     <h4><b>Jonah Hill</b></h4> 
 
     <p>Architect &amp; Engineer</p> 
 
     </div> 
 
    </div> 
 

 
    </div> 
 
    <div class="col-sm-3"> 
 

 
    <div class="card"> 
 
     <div> 
 
     <img src="http://res.cloudinary.com/wphire/image/upload/c_scale/freelancer_profile_pic_4" class="img-responsive"> 
 
     </div> 
 

 
     <div class="card-container"> 
 
     <h4><b>Seth Rogan</b></h4> 
 
     <p>Architect &amp; Engineer</p> 
 
     </div> 
 
    </div> 
 

 
    </div> 
 

 
</div>

Answer 2

固定の高さを設定することにより、あなたはちょうどそれを得る - 固定の高さを、それはもはや対応しません。イメージに縦横比を保持したい場合は、イメージ要素にobject-fit: coverを使用できます。 IEとEdgeでは動作しません..