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;
}
これだと、ただ単に、画像の見える領域は変わらず、均等に拡大縮小していっている状態です。
お知恵を貸していただけますと幸いです。
よろしくお願いいたします。
回答2件
あなたの回答
tips
プレビュー