Bootstrapで画像サイズを統一したい。

Question

記事投稿アプリで画像のサイズ調整がうまいこといきません。
画像の表示には、Railsのヘルパーメソッド、image_tagを使用しています。

解決したいこと

レスポンシブを保ちつつ、カードのサイズを揃えて画像も特定サイズの枠内で表示したいです。
(左端のカード画像を右２つの画像サイズに合わせたい。その際に、画像が歪まないようにもしたい)

ActiveStorageを導入しているのでimage_tagにvariantを用いて、resizeでsizeを指定してみたのですが
サイズが固定されてしまうため、レスポンシブを保てませんでした。
何か良い方法等、ご教示いただけたら幸いです。

該当のソースコード

_article.html.erb

<div class="container">
<div class="row">
  <% @articles.each do |article| %>
  <div class="col-md-4">
    <div class="card mb-4 shadow-sm">
        <div class="bd-placeholder-img card-img-top">
          <%= image_tag article.image, class: "img-fluid" %>  # ここです
        </div>

        <div class="card-body">
          <h4><%= article.title %></h4>
          <p class="card-text text-truncate">
            <%= article.text %>
          </p>
          <div class="d-flex justify-content-between align-items-center">
            <div class="btn-group">
              <button type="button" class="btn btn-sm btn-outline-secondary">詳細</button>
              <button type="button" class="btn btn-sm btn-outline-secondary">編集</button>
            </div>
            <small class="text-muted">9 mins</small>
          </div>
        </div>
    </div>
  </div>
  <% end %>
</div>
</div>

補足情報

• Ruby 3.0.1
• Rails 6.1.3
• Bootstrap4

Comments

[m.ts10806]

画像などはなるべくteratailの画像投稿機能を利用してください。（外部サービスだと何かの時に参照できないことがあります）

[m.ts10806]

「縦だけ」ならheightを同値で揃えれば良いのでは。
「縦も横も」だとheight,widthを同値にすれば良いですが全て同じ比率でないと崩れます、どこまでを考えられてますか？
もしくは「カードのサイズをそろえて画像は特定サイズの枠内で表示」ということもできますけど、どこまでを想定されているか記載してください。

[Tsuyoponta]

言葉足らずですみませんでした。
画像も直接挿入するように修正しました。

Answer 1

<div class="card h-100"> と各カードに .h-100 を付けます。
変数 $card-height: 100%; でデフォルトで高さ揃えができます。(v5でも同じです)
Cards · Bootstrap

Comments

[Tsuyoponta]

ありがとうございます。
各カードの高さは揃えることができました！
画像の高さを揃えることはできませんでしょうか？

[takna]

Bootstrap からは外れますが、思い付くのは画像を囲む要素のサイズを固定し、画像に `object-fit: cover;` を適用するとかですかね。※IEは非対応です

[Tsuyoponta]

試してみましたが、期待通り結果は得られませんでした。
class="card h-100"ですと違和感があったため、画像のリサイズはやめて、class="card-columns"で各カードを敷き詰めることにしました。

Answer 2

画像をimgタグで直置きではなく一定の縦横幅を持った要素の背景画像にすれば良いのでは。
見た感じ比率が違うので、画像が変に間延びしたりするよりは見た目担保できると思います。

Comments

[Tsuyoponta]

私の理解が及ばず申し訳ないのですが、カードに画像を直置きではなく背景画像にするというのがわかりません。よろしければ「カードのサイズをそろえて画像は特定サイズの枠内で表示」の仕方をご教示いただけませんでしょうか。

[m.ts10806]

>カードに画像を直置きではなく背景画像にするというのがわかりません。

固定のwidth,heightのdivの背景画像として今imgタグで置いている画像を
background-imageに指定するだけです。

>「カードのサイズをそろえて画像は特定サイズの枠内で表示」の仕方
それは、taknaさんの回答で実現できたのでは？

[Tsuyoponta]

残念ながらレスポンシブを担保した、画像のリサイズはできませんでした。
ありがとうございました。

[m.ts10806]

「画像のリサイズがしたい」とはなかったのでそこには触れていません。
「特定サイズの枠内で表示したい」とあるのでその案を提示しています。