画像を表示しよう

<div><img src="../assets/images/sample.jpg" alt="サンプル"></div>
<div><img src="assets/images/sample.jpg" alt="サンプル"></div>
<div><img src="images/sample.jpg" alt="サンプル"></div>
<div><img src="https://images.unsplash.com/photo-1600093463592-8e36ae95ef56" alt="サンプル"></div>

<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
<div class="box box4"></div>
<div class="box box5"></div>

.box {
  width: 400px;
  height: 200px;
  background-image: url(https://images.unsplash.com/photo-1600093463592-8e36ae95ef56);
}
.box1 {
  background-size: cover;
}
.box2 {
  background-size: contain;
}
.box3 {
  background-size: 100%;
}
.box4 {
background-size: contain;
background-position: center;
}
.box5 {
background-size: 50%;
background-repeat: no-repeat;
}