CSS: サイズの単位である %とvwの比較

(1) %の場合

sample image

HTML


<div class="content1">
     <img src="./sample.jpg" alt="sample image">
</div>

CSS


div.content1 {
  width: 80%;
}
div.content1 img {
  width: 100%;
}

(2) vwの場合

sample image

HTML


<div class="content2">
     <img src="./sample.jpg" alt="sample image">
</div>

CSS


div.content2 {
  width: 80%;
}
div.content2 img {
  width: 100vw;
}