ブートストラップの高さが固定されたレスポンシブルカードイメージ4

Question

たとえば、解像度は760x270ですが、この比率では非常に薄く見えますが、正方形のように見えます。しかし、たとえば、解像度が760x500の正方形の画像をさらに配置すると、それはまだ収まり、歪まないようにしたいと考えています。これどうやってするの？ 「パディングトリック」を使用してラッパーと1の比、次いで絶対（それが中心に置かれるようにラッパーに画像を配置し、ラッパーの高さの100％を占める：あなたは1を強制することができ

<div class="col-xs-6 col-md-4"> 
         <div class="card"> 
          <img class="card-img-top img-fluid" src="img/1.jpg" alt="Card image cap"> 
          <h4 class="card-title">Title</h4> 
          <div class="card-body"> 
           <p class="card-text">Some quick example text to build on </p> 
           10 mins ago <div class="float-right"><i class="fa fa-comment-o" aria-hidden="true"></i> 0</div> 
          </div> 
         </div> 
        </div><!--/span--> 

Answer 1

ウィンドウのサイズを調整するためのスニペットを実行した後、「フルページ」）をクリックしてください：

.wrapper { 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 

 
.wrapper:after { 
 
    content: ''; 
 
    display: block; 
 
    padding-top: 100%; 
 
} 
 

 
.wrapper img { 
 
    width: auto; 
 
    height: 100%; 
 
    max-width: none; 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 0; 
 
    transform: translateX(-50%); 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-xs-6 col-md-4"> 
 
     <div class="card"> 
 
     <div class="wrapper"> 
 
      <img class="card-img-top img-fluid" src="//placehold.it/760x270" alt="Card image cap"> 
 
     </div> 
 
     <h4 class="card-title">Title</h4> 
 
     <div class="card-body"> 
 
      <p class="card-text">Some quick example text to build on </p> 
 
      10 mins ago <div class="float-right"><i class="fa fa-comment-o" aria-hidden="true"></i> 0</div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="col-xs-6 col-md-4"> 
 
     <div class="card"> 
 
     <div class="wrapper"> 
 
      <img class="card-img-top img-fluid" src="//placehold.it/760x500" alt="Card image cap"> 
 
     </div> 
 
     <h4 class="card-title">Title</h4> 
 
     <div class="card-body"> 
 
      <p class="card-text">Some quick example text to build on </p> 
 
      10 mins ago <div class="float-right"><i class="fa fa-comment-o" aria-hidden="true"></i> 0</div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

ない、これは1のためのものであること：1の比率。この比率を調整するには、パーセントとして計算します。 4：3の場合、これは3/4 = 0.75になります。パーセントとしての0.75は75%となります。 padding-topという値を.wrapper:afterとして使用します。