<div class="wrap">
  <p>③-2 background-imgを使用したサムネイル</p>
  <div class="col">
    <div class="background-image-con" style="background-image: url(https://f.uploader.xzy.pw/eu-prd/upload/20191108161128_42466f414a.jpg);"></div>
    <p>w:200px・h:200px・内接</p>
  </div>
  <div class="col">
    <div class="background-image-cov" style="background-image: url(https://f.uploader.xzy.pw/eu-prd/upload/20191108161128_42466f414a.jpg);"></div>
    <p>w:200px・h:200px・外接</p>
  </div>
  <div class="col">
    <div class="background-image-con-res" style="background-image: url(https://f.uploader.xzy.pw/eu-prd/upload/20191108161128_42466f414a.jpg);"></div>
    <p>レスポンシブ・内接</p>
  </div>
  <div class="col">
    <div class="background-image-cov-res" style="background-image: url(https://f.uploader.xzy.pw/eu-prd/upload/20191108161128_42466f414a.jpg);"></div>
    <p>レスポンシブ・外接</p>
  </div>
   <div class="col">
    <div class="background-image-con" style="background-image: url(https://f.uploader.xzy.pw/eu-prd/upload/20191108161750_6473706547.jpg);"></div>
    <p>w:200px・h:200px・内接</p>
  </div>
  <div class="col">
    <div class="background-image-cov" style="background-image: url(https://f.uploader.xzy.pw/eu-prd/upload/20191108161750_6473706547.jpg);"></div>
    <p>w:200px・h:200px・外接</p>
  </div>
  <div class="col">
    <div class="background-image-con-res" style="background-image: url(https://f.uploader.xzy.pw/eu-prd/upload/20191108161750_6473706547.jpg);"></div>
    <p>レスポンシブ・内接</p>
  </div>
  <div class="col">
    <div class="background-image-cov-res" style="background-image: url(https://f.uploader.xzy.pw/eu-prd/upload/20191108161750_6473706547.jpg);"></div>
    <p>レスポンシブ・外接</p>
  </div>
</div>
.background-image-con{
    background-color: #ccc;
    background-position: center center;
    background-repeat: no-repeat;
    width: 200px;
    height: 200px;
    background-size: contain;
}
.background-image-cov{
    background-color: #ccc;
    background-position: center center;
    background-repeat: no-repeat;
    width: 200px;
    height: 200px;
    background-size: cover;
}
.background-image-con-res{
  background-color: #ccc;
  background-position: center center;
  background-repeat: no-repeat;
  width: 100%;
	height:0;
	padding-top: 100%;
  background-size: contain;
}
.background-image-cov-res{
  background-color: #ccc;
  background-position: center center;
  background-repeat: no-repeat;
  width: 100%;
	height:0;
	padding-top: 100%;
  background-size: cover;
}

/* レイアウト用 */
*{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
img {
  display:block;
  vertical-align:bottom;
}
.wrap{
  max-width:900px;
  margin:auto;
  display: -ms-flexbox;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}
.col{
  width:50%;
  padding:10px;
}
p{
  width:100%;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.