＜レスポンシブ＞img 画像をサイズを変えずに中央固定のまま画面幅をレスポンシブ

Question

幅1000pxの画像があり、
画面幅１２００pxの時も７００pxの時も画像が同じ大きさで表示をしたいです。（画面幅７００pxの時は両はしをはみ出させたい。）
画面幅７００pxの際は両はし１５０pxずつ画面からはみ出るような形で画像の中心が真ん中に来るように配置をしたいです。

この場合に背景として画像を配置すればbackground-position:centerでやりたいことができるのですが、
背景の上に載せる文字も特にないため、空divに背景を当てるような形になります。
ただ、空divは使わない方がよく聞くので、できればimgタグで画像配置をしたいです。

解決法をご存知の方がいらっしゃいましたら、お助けいただけますと幸いでございます。

<img src="img/about/03.jpg" alt="">

img{
     object-fit: cover;
     object-position: center;
    }

Comments

[yoshinavi]

imgタグで、上手くいかなかったコードとは、どのようなコードでしょうか？

[yasutomi]

imgタグで、上手くいかなかったコードと
その画像の掲載がないと回答不可です。

Answer 1

こんな感じですか？

<div>
  <img src="https://placehold.jp/1000x200.png">
</div>

div {
  margin: 0 auto;
  max-width: 1000px;
  height: 200px;
}

img {
  width: 100%;
  height: 100%;
  object-fit:cover;
}

Comments

[kii.32]

教えてくださったコードで解決することができました！ありがとうございます！

[yoshinavi]

解決されて何よりです。
(^^)