ブートストラップ/フレックスボックスカード：画像をデスクトップの左右に移動

Question

フレックスボックスを有効にしてブートストラップ4を使用して次のカードレイアウトを作成しようとしています。画像は私の現在の実装から取得され、期待どおりに動作します。

HTMLの構造は以下の通りです：私は、より大きな画面に拡大するとき

<section> 
    <div class="container"> 
    <div class="row"> 
     <div class="col-md-6"> 
     <div class="card"> 
      <div class="card-block"> 
      <h4 class="card-title">Curabitur gravida vestibulum imperdiet.</h4> 
      <p class="card-text">Cras convallis ut turpis vitae facilisis. Morbi eu augue vel quam efficitur rhoncus vitae eget lectus. Cras augue ligula, aliquam ut enim ut, feugiat imperdiet sem. Integer sed mi quis nisl eleifend interdum.</p> 
      <p class="card-text">Cras convallis ut turpis vitae facilisis. Morbi eu augue vel quam efficitur rhoncus vitae eget lectus. Cras augue ligula, aliquam ut enim ut, feugiat imperdiet sem.</p> 
      <a href="#" class="btn btn-primary">Read More</a> 
      </div> 
     </div> 
     </div> 
     <div class="col-md-6"> 
     <img class="card-img-bottom" src="img1.jpg" alt="" title=""> 
     </div> 
    </div> 
    </div> 
</section> 

は今、私は（ブートストラップと期待されるが、1つを望んでいません）出力以下しまっ：

私が代わりに見たいものは：

私の質問は、このようなレイアウトを適切に実装する方法です。私はフレックスボックスを使用しているので、Bootstrapの列（col- *）は常に同じ高さで、正確に私が望むものです。しかし、私は2つの列の間のパディングを削除し、両方の列の内容を常に親の高さの100％をカバーするようにし、最後に画像の縦横比を維持するようにしてください。

私はグーグルでいろいろなソリューションを試しましたが、それらのすべては、過度に複雑な、または「ハッキーな」ソリューションであるようです。だから私は、この種のレイアウトを実装する簡単な方法がないのは本当ですか？

注：ソリューションはブートストラップ関連である必要はありませんが、この種の問題に対する一般的な解決策はさらに優れています。

Answer 1

background-size：coverを使用して、これを行う1つの方法を考え出しました。私はimgの代わりにdivを使用しなければならなかったが、そうでなければこの解決策はうまくいき、私の場合imgはそれほど必要ではない。他の解決策はまだ歓迎されています私は少し私のhtmlを修正

：カード-IMG-下の場合

<section> 
    <div class="container"> 
    <div class="card"> 
     <div class="row"> 
     <div class="col-md-6"> 
      <div class="card-block"> 
      <h4 class="card-title">Curabitur gravida vestibulum imperdiet.</h4> 
      <p class="card-text">Cras convallis ut turpis vitae facilisis. Morbi eu augue vel quam efficitur rhoncus vitae eget lectus. Cras augue ligula, aliquam ut enim ut, feugiat imperdiet sem. Integer sed mi quis nisl eleifend interdum.</p> 
      <p class="card-text">Cras convallis ut turpis vitae facilisis. Morbi eu augue vel quam efficitur rhoncus vitae eget lectus. Cras augue ligula, aliquam ut enim ut, feugiat imperdiet sem.</p> 
      <a href="#" class="btn btn-primary">Read More</a> 
      </div> 
     </div> 
     <div class="col-md-6"> 
      <div class="card-img-bottom"> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 
</section> 

を、私はスタイル設定：

.card-img-bottom { 
    color: #fff; 
    height: 20rem; 
    background: url(images/img1.jpg) center no-repeat; 
    background-size: cover; 
} 

を、デスクトップビューで、私は100％に高さを変更するので、高さがあります常にカードブロックの高さと同じです。

ブートストラップのデフォルトのパディングのために、デスクトップビューでカードブロックとカードimg-bottomの間に余分なパディングが残っています。そのため、白い部分は画像より少し大きめです。私にとっては問題ではないので、私はそれらを取り除かなかった。