もともとサイズの異なる画像の高さを揃えたい

Question

前提・実現したいこと

もともとサイズの違う画像をCSSで大きさを揃えて表示したい

発生している問題

width100
height　autoにしているが大きさがバラバラである

.picture4 {
  width: 100%;
  height: auto;
}

.picture5 {
  width: 100%;
  height: auto;
}

.picture6 {
  width: 100%;
  height: auto;
}
コード

<div id="column">
        <h2 class="text-center py-3">自分のやるべき事やそれに対するご褒美を設定する事でセルフマネジメントを行えるアプリケーション！</h2>
      </div>
      <div class="row">
        <div class="col-md-4 col-12">
        <div class="picture4 d-block w-100"></div>
    <%= image_tag 'img9.jpg', class:"picture4"%>
        </div>
        <div class="col-md-4 col-12">
          <div class="picture5 d-block w-100"></div>
    <%= image_tag 'img4.jpg', class:"picture5"%>
        </div>
        <div class="picture col-md-4 col-12">
          <div class="picture6 d-block w-100"></div>
    <%= image_tag 'img5.jpg', class:"picture6"%>
        </div>
      </div>
コード

試したこと

width 100%
height autoにしてみた

補足情報（FW/ツールのバージョンなど）

picture4が勉強、5がゲーム6が映画です。

Comments

[miyabi_pudding]

CSSの指定通りの挙動になっています。
（width: 100%を指定した場合、親要素と同じ横幅となる）
どのような表示にしたいか、イメージ画像でいいので提示してください。

Answer 1

こんにちは。

もともとサイズの異なる画像の高さを揃えたい

height: autoは「中身に合わせる」という意味ですので、これでは画像サイズに合わせてしまいます。
height: 100%は「親要素と同じにする」という意味なので、こちらを使ってみてはいかがですか？

サンプル

img {
  height: 100%;
  object-fit: cover; /* 念のため */
}