CodePen Embed - 背景画像のサイズ設定[ background-size ]

<h4>imgタグで表示<h4>
<img src="https://ssl.gstatic.com/ui/v1/icons/mail/rfr/logo_gmail_lockup_default_1x_r2.png"><hr>

<h4>(CSS)background-imageで表示<h4>
<h5># background-size:auto;<h5>
<div id="d1"></div><hr>

<h5># background-size:contain;<h5>
<div id="d2"></div><hr>

<h5># background-size:cover;<h5>
<div id="d3"></div><hr>

<h5># background-size:200px 100px;<h5>
<div id="d4"></div><hr>

<h5># background-size:100%;<h5>
<div id="d5"></div><hr>

div{
  width:200px;
  height:100px;
  background-image:url("https://ssl.gstatic.com/ui/v1/icons/mail/rfr/logo_gmail_lockup_default_1x_r2.png");
}
#d1{
  background-size:auto;
}
#d2{
  background-size:contain;
}
#d3{
  background-size:cover;
}
#d4{
  background-size:200px 100px;
}
#d5{
  background-size:100%

This Pen is owned by otsumamin on CodePen.

See more by @otsumamin on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.