web-dev-qa-db-ja.com

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

Bootstrap 4 with flexbox enabled。を使用して、次のカードレイアウトを構築しようとしています。画像は現在の実装から取得され、期待どおりに動作します。

Current mobile layout

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>

これで、より大きな画面に拡大すると、次の出力が得られました（Bootstrapが必要ではありません）。

enter image description here

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

enter image description here

私の質問は、この種のレイアウトを適切に実装する方法です。私はflex-boxを使用しているので、Bootstrap列（col- *）は常に同じ高さです。これはまさに私が望むものです。しかし、2列間のパディングを削除してから、両方の列コンテンツは常に親の高さの100％をカバーし、最後に画像がアスペクト比を維持するようにします。したがって、例のように中央から切り抜く必要があります。

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

注：解決策はBootstrap関連する必要はありません。この種の問題に対する一般的な解決策はさらに優れています。

htmlcsstwitter-bootstrapresponsive-designbootstrap-4
15
m5seppal

Background-size：coverを使用して、これを行う1つの方法を見つけました。私はimgの代わりにdivを使用しなければなりませんでしたが、それ以外の場合、このソリューションは機能し、私の場合はimgはそれほど必要ありません。他のソリューションも引き続き歓迎します。

HTMLを少し変更しました。

<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の場合、スタイルを設定します：

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

また、デスクトップビューでは、高さを100％に変更して、高さが常にカードブロックの高さと同じになるようにします。

Bootstrapデフォルトのパディングが原因で、デスクトップビューのcard-blockとcard-img-bottomの間にまだ余分なパディングがあります。そのため、白い領域は画像よりわずかに大きくなります。私、それは問題ではないので、それらを削除しませんでした。

enter image description here

23
m5seppal

私が見つけた1つの解決策、私は画像の高さに問題がありますが、それは別の質問です...：P

準備が整ったものを再発明する大きな問題は、元の機能が必要なときにソリューションが問題を引き起こす傾向があるため、私のソリューションでは、クラスが使用された他のケースと連携するクラスを追加しただけです、したがって、「card-img-left」クラスが存在する場合、「card-budy」クラスには左揃えの画像のサイズに比例した左マージンがあります。クラスが存在しない場合、このマージンはオリジナルになります。これは実行可能なソリューションであり、元のシステムを混乱させることはありませんが、改良する必要があります...

 .card {
      overflow: hidden;
  }

    .card-img-left {
        position: absolute;
        height: auto;
        max-height: 100%;
        width: auto;
        max-width: 40%;
    }

    .card-img-left ~ .card-body {
        margin-left: 40%;
    }
0
Luciano Lourenço