▼（１）画像を歪ませず、画像全体を表示（画像によっては高さがでかすぎる）

img{
width: 100vw;
height:auto;
}

▼（２−１）画像を歪ませず、画像の一部だけ表示（background-imageバージョン）

div{
width: 100vw;
height:500px; ←親の高さ固定しちゃう
background: url(ichigo.jpg) center center/cover;
}

▼（２−２）画像を歪ませず、画像の一部だけ表示（imgタグバージョン）

img{
width: 100vw;
height:500px; ←img自体の高さ固定しちゃう
object-fit:cover;
object-position:center center;(デフォルトで中心にくる)
}

▼（３）画像を歪ませず、領域の縦横比も変えず、画像の一部だけ表示（高さにvwバージョン）

div{
width: 100vw;
height:40vw; ←幅にも高さにもvwを使う
background: url(ichigo.jpg) center center/cover;
}
（２−１，２−２どっちのやり方でもいい。heightの単位変えただけ）

▼（４）画像を歪ませず、領域の縦横比も変えず、画像の一部だけ表示（paddingバージョン）

div{
width: 100vw;
height:0; ←もしくは書かないでauto
padding-top: 40%;
background: url(ichigo.jpg) center center/cover;
}
（２−２のやり方はできない。background-imageのみ。Google Mapの埋め込みによく使われる。）

▼（５）画像を歪ませず、領域の縦横比はいいかんじに、画像の全体や一部を表示
（つまりいいかんじのレスポンシブを1枚の画像でやる）

div{
width: 100vw;
height:500px;　　←画面幅が小さくなると、それに対して高さ500pxはでかすぎるので
max-height:50vw　←画像の高さが画面幅の50%を超えないようにする
background: url(ichigo.jpg) center center/cover;
}
（２−１，２−２どっちのやり方でもいい。）