<div class="wrap">
  <p>②-1 imgタグを使用したサムネイル(object-fit)</p>
  <div class="col">
    <img class="object-fit-con-a" src="https://f.uploader.xzy.pw/eu-prd/upload/20191108161128_42466f414a.jpg" alt="img">
    <p>w:200px・h:200px・内接</p>
  </div>
    <div class="col">
    <img class="object-fit-cov-a" src="https://f.uploader.xzy.pw/eu-prd/upload/20191108161128_42466f414a.jpg" alt="img">
      <p>w:200px・h:200px・外接</p>
  </div>
  <div class="col">
    <div class="img_box"><img class="object-fit-con-b" src="https://f.uploader.xzy.pw/eu-prd/upload/20191108161128_42466f414a.jpg" alt="img">
    </div>
    <p>レスポンシブ・内接</p>
  </div>
  <div class="col">
    <div class="img_box"><img class="object-fit-cov-b" src="https://f.uploader.xzy.pw/eu-prd/upload/20191108161128_42466f414a.jpg" alt="img">
    </div>
    <p>レスポンシブ・外接</p>
  </div>
  <div class="col">
    <img class="object-fit-con-a" src="https://dl.dropbox.com/s/5yj8jimjx4jea2r/1dce9ed2fc15a7e978f50cd5dd1c9a42_s.jpg?dl=0" alt="img">
    <p>w:200px・h:200px・内接</p>
  </div>
    <div class="col">
    <img class="object-fit-cov-a" src="https://dl.dropbox.com/s/5yj8jimjx4jea2r/1dce9ed2fc15a7e978f50cd5dd1c9a42_s.jpg?dl=0" alt="img">
      <p>w:200px・h:200px・外接</p>
  </div>
  <div class="col">
    <div class="img_box"><img class="object-fit-con-b" src="https://dl.dropbox.com/s/5yj8jimjx4jea2r/1dce9ed2fc15a7e978f50cd5dd1c9a42_s.jpg?dl=0" alt="img">
    </div>
    <p>レスポンシブ・内接</p>
  </div>
  <div class="col">
    <div class="img_box"><img class="object-fit-cov-b" src="https://dl.dropbox.com/s/5yj8jimjx4jea2r/1dce9ed2fc15a7e978f50cd5dd1c9a42_s.jpg?dl=0" alt="img">
    </div>
    <p>レスポンシブ・外接</p>
  </div>
</div>
.object-fit-con-a{
  background-color: #ccc;
	object-fit: contain;
  width: 200px;
  height: 200px;
}
.object-fit-cov-a{
  background-color: #ccc;
	object-fit: cover;
  width: 200px;
  height: 200px;
}
.img_box{
    background-color: #ccc;
    width: 100%;
    padding-bottom: 100%;
    height: 0;
    position:relative;
}
.object-fit-con-b{
	object-fit: contain;
  width: 100%;
  height: 100%;
  position: absolute;
}
.object-fit-cov-b{
	object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
}

/* レイアウト用 */
*{
  -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.