レスポンシブサイトの画像 object-fit: coverが反映されない

Question

模写コーディングに取り組んでいます。

レスポンシブサイトを作成しているのですが、
画像にobject-fit: coverを指定しているのに反映されていない気がします。
画面を小さくしても画像だけ表示が変わらないままです。

詳しい方いらっしゃいましたら教えてください、よろしくお願いいたします。

###自分の回答

(index.html)

  <div class="main-visual">
    <img src="img/mainvisual-pc.jpg" alt="メイン画像" class="m-img">
  </div>



(style.css)
.m-img {
  width: 100%;
  object-fit: cover;
  height: 420px;
  margin-bottom: 90px;
}


(responsive.css)

@media (max-width: 600px) {
.m-img {
  max-width: 100%;
}

###正解

(index.html)


    <div id="mainvisual">
        <picture>
          <source media="(max-width: 600px)" srcset="img/mainvisual-sp.jpg">
          <img src="img/mainvisual-pc.jpg" alt="テキストテキストテキスト">
        </picture>
      </div>



(style.css)

#mainvisual img {
  width: 100%;
  max-width: 1920px;
  height: 420px;
  object-fit: cover;
}


(responsive.css)

記載は特にありませんでした。

Answer 1

コーディングサイトに
レスポンシブ時の画像画像の切り替えは、pictureタグで行います。　という指示があったのを見落としていました。
再度取り組んでみようと思います。