Bootstrap4で画像をグリッドレイアウトで配置したい

Question

###Bootstrap4で画像をグリッドレイアウトで配置したい
Bootstrap4でサイトの模写練習をしています。

画像1枚目の右のようなデザインのリンクを作成したいのですが、、、

<div class="container">
            <div class="row">
              <div class="col-2 p-4 mb-5">
                <img class="img-fluid" src="img/70B85DA3-C8C1-45AA-B241-0E298F20234C_4_5005_c.jpeg">
              </div>
              <div class="col-10 p-4 mb-5 bg-success">box</div>
            </div>
          </div>

このようにコードをかいたところ画像のようにうまくいきません。
元サイトを参考に、と思いデベロッパーツールを覗いてみたところ

なにやらデータ属性なるものを使っているらしいのですが、調べてみてもいまいち使用方法がわかりませんでした。
このようなデザインをBootstrapで再現するのは不可能なのでしょうか？
また、データ属性とはどのような時に使うものなのでしょうか？
回答お願いします。

Comments

[m.ts10806]

そもそもグリッドレイアウトについては基本を理解したうえで進められていますか？
設定値を見ると、足りてないように思います。
>データ属性とは
本件とは別問題では？

[sshino]

基本は理解したつもりでした。
抜けている箇所を教えていただけると有り難いです。
データ属性に関しては、デベロッパーツールを見てこのレイアウトを作るために必要だと思っていました。スルーしてもらっても構いません。
お手数をおかけしますが回答よろしくお願いします。

[m.ts10806]

横幅１００％を１２分割するので、同じ階層(pやmbなどの指定のこと）で足して１２になってないと前後のレイアウトの関係で崩れることがあります。

[sshino]

pやmの設定は０から５までの段階で記述することで、フレームワーク内の決められたｐやｍｂを当てはめてくれるものであり、12分割というのはcol-xのｘの部分の値の合計が12であればよいという認識は間違っているのでしょうか？

Answer 1

親要素の正方形で、子要素の画像 (長方形) をトリミングしたいのなら、
「object-fit」というプロパティが使えそうです。

子要素の画像に以下のように指定してみてください

/* CSSセレクタいまいちなので、適宜設定してください */
.col-2.p-4 {
  background: #f00;
  padding: 0 !important;
}
/* 画像に「object-fit: cover;」を指定 */
.col-2.p-4 img {
  object-fit: cover;
}

もしかしたら、画像サイズが小さいと中央に小さく表示されるかもしれませんので、
まずは大きめの画像で試してください。

参考:
https://developer.mozilla.org/ja/docs/Web/CSS/object-fit

---

このようなデザインをBootstrapで再現するのは不可能なのでしょうか？

あらゆるCSSフレームワークは、CSSの上書きによってフレームワークを使っていないときと同じように見た目を実装できます。なので不可能ではないです (面倒になることはよくありますが)。

CSSセレクタの詳細度をフレームワークよりも上げてみたり、
フレームワーク側のCSSを確認して「!important」があれば上書きする側でも追加する、
などすれば実現できます。

---

また、データ属性とはどのような時に使うものなのでしょうか？

「data-xxxx」というような属性は、ソースコードを書く人が好きなように指定して、好きなようにCSSやJavaScriptで使う、という用途で使われます。

「data-xxxx」があると見た目がこうなる、というわけではありません。

Answer 2

カードの親のdivをaタグにすれば解決しました。