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

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

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

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

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

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

m.ts10806

2020/05/05 06:40

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

sshino

2020/05/05 06:58

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

m.ts10806

2020/05/05 07:09

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

sshino

2020/05/05 08:28

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

行動規範の内容に同意します

回答2件

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

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

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