挿入する画像

今回は、サイズの違う画像を大きさをあわせて出力していきます。下の状態は、サイズの違う画像を何もせずに横に並べた状態です。

• 500px×300px
• 500px×560px
• 720px×300px
• 330px×330px

backgroundでサイズの調整を行った場合

ブラウザの画面幅を変更して、きちんと調整されるか確認してみてください。

object-fitを使ってサイズの調整を行った場合

ブラウザの画面幅を変更して、きちんと調整されるか確認してみてください。

縦横比を可変させながら画面幅に合わせる

• 
• 
• 
• 

縦横比を維持したまま画面幅に合わせる

• 
• 
• 
•