<div class="wrap">
  <p>②-2 imgタグを使用したサムネイル(ie対応版)</p>
  <div class="col">
    <div class="img_box-ie-200"><img class="object-fit-con-ie" src="http://jsrun.it/assets/8/I/9/P/8I9P1.jpg" alt="img"></div>
    <p>w:200px・h:200px・内接</p>
  </div>
  <div class="col">
    <div class="img_box-ie-200"><img class="object-fit-cov-ie-w" src="http://jsrun.it/assets/8/I/9/P/8I9P1.jpg" alt="img"></div>
    <p>w:200px・h:200px・外接</p>
  </div>
  <div class="col">
    <div class="img_box-ie"><img class="object-fit-con-ie" src="http://jsrun.it/assets/8/I/9/P/8I9P1.jpg" alt="img"></div>
    <p>レスポンシブ・内接</p>
  </div>
  <div class="col">
    <div class="img_box-ie"><img class="object-fit-cov-ie-w" src="http://jsrun.it/assets/8/I/9/P/8I9P1.jpg" alt="img"></div>
    <p>レスポンシブ・外接</p>
  </div>
  <div class="col">
    <div class="img_box-ie-200"><img class="object-fit-con-ie" src="https://dl.dropbox.com/s/5yj8jimjx4jea2r/1dce9ed2fc15a7e978f50cd5dd1c9a42_s.jpg?dl=0" alt="img"></div>
    <p>w:200px・h:200px・内接</p>
  </div>
  <div class="col">
    <div class="img_box-ie-200"><img class="object-fit-cov-ie-h" src="https://dl.dropbox.com/s/5yj8jimjx4jea2r/1dce9ed2fc15a7e978f50cd5dd1c9a42_s.jpg?dl=0" alt="img"></div>
    <p>w:200px・h:200px・外接</p>
  </div>
  <div class="col">
    <div class="img_box-ie"><img class="object-fit-con-ie" 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-ie"><img class="object-fit-cov-ie-h" src="https://dl.dropbox.com/s/5yj8jimjx4jea2r/1dce9ed2fc15a7e978f50cd5dd1c9a42_s.jpg?dl=0" alt="img"></div>
    <p>レスポンシブ・外接</p>
  </div>
</div>
.img_box-ie-200{
    background-color: #ccc;
    overflow: hidden;
    width: 200px;
    height: 200px;
    position: relative;
}
.img_box-ie{
    overflow: hidden;
    background-color: #ccc;
    width: 100%;
    padding-bottom: 100%;
    height: 0;
    position:relative;
}
.object-fit-con-ie {
    position: absolute;
    top: 50%;
    left: 50%;
    max-width: 100%;
    max-height: 100%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.object-fit-cov-ie-w{
    position: absolute;
    width: auto;
    height: 100%;
    top: 50%;
    left: 50%;
    min-height: 100%;
    min-width: 100%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.object-fit-cov-ie-h{
    position: absolute;
    width: 100%;
    height: auto;
    top: 50%;
    left: 50%;
    min-height: 100%;
    min-width: 100%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

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