レスポンシブ対応 画面幅の増減に応じて画像の領域が左右から均等に増減するにはどうしたら良いでしょうか？

Question

Airbnbの以下のサイトの模写をしているのですが、画像部分のレスポンシブの表現がうまくいきません。

https://www.airbnb.jp/work?_set_bev_on_new_domain=1598171946_ZDVjZTgyMWFjMDQy

例えば、出張先でも、アットホームの左側にある画像なのですが、（（ソファで女性がPCを広げている）
携帯〜、743pxくらいの画面幅では、検証ツールで画面幅を狭くしていくと、画像の中央は変わらず、左右から均等に見切れていきま。744p以上の画面幅でも同様に、画面幅を大きくしていくと、左右から見える範囲が均等に増えていきます。

このように画像を表現するにはどのようなCSSを書けば良いのでしょうか？

現在は、以下のように記述しています。

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

これだと、ただ単に、画像の見える領域は変わらず、均等に拡大縮小していっている状態です。

お知恵を貸していただけますと幸いです。
よろしくお願いいたします。

Comments

[Zuishin]

URL の後ろのほうについてるのはアフィリエイトの何かですか？

[kuma_kuma_]

> 画像部分
URLに移動すると背景で動画が再生されていますが動画部分ですか？
(対象画像が見つかりません。)

[yuiran]

Zuishinさん
AirbnbのサイトのURLをそのままこちらにコピーしたのでアフィリエイト機能はついていないと思います。（Airbnbの方でつけていないのなら）

[yuiran]

kuma_kuma_さん
動画部分ではなく、その下にある画像で、上から４番め以降の画像の部分です。（ソファで女性がPCを広げている画像や、船を漕いでいる画像など）

Answer 1

HTML

<div class="任意のクラス名 container-fluid"> <div class="row"> <div class="画像背景用クラス名 col-12 col-md col-lg">　 </div> <!-- 画像背景用クラス名col-auto col-md-12 col-lg終わり--> </div> <!--row 終わり-->

CSS
画像背景用クラス名 {
width: 80%;
height: 380px;
padding: 30px;
background: url('画像のURL') no-repeat center;
margin-right: 15px;
margin-left: 10px;
background-size: cover;
}

Answer 2

こんにちは。

こんな感じでしょうか。

サンプル

<div>
<img src="...">
</div>

div{
  height: 500px;
}

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

Comments

[yuiran]

ありがとうございます！そちらでも試してみようと思います。過去の講義ノートを見ていたらバックグラウンドで指定する方法でも実現できたので、自分得できた解決方法のところに載せておきます。