レシポンシブデザイン練習

画像のレスポンシブ

この写真の幅は親要素の幅に合せて「width:790px」に設定しました。Window幅を800pxより狭くすると右側が切れて非表示になります。
この写真の幅は「max-width: 100%;height: auto;」に設定しました。Window幅を800pxより狭くすると縦横比を保ったまま縮小されます。
また、幅が450px以下になったときは「display: none;」で2枚とも非表示にし別写真を表示させました。
「display: none;」で非表示にしてあった写真を「display: inline;」で表示させました。
サイズは大画面の下側の写真と同様に「max-width: 100%;height: auto;」に設定しました。

参考　https://sole-color-blog.com/blog/72/