<h1>記事一覧</h1>
<ul class="of">
  <li><figure><a href="http://idr-zz.hatenablog.com" target="_blank"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/i/idr_zz/20180524/20180524002205.jpg" alt="正方形"></a></figure>
    <p class="title"><a href="http://idr-zz.hatenablog.com" target="_blank">ぶろぐのたいとる、ぶろぐのたいとる、ぶろぐのたいとる1</a></p>
  </li>
    <li><figure><a href="http://idr-zz.hatenablog.com" target="_blank"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/i/idr_zz/20180524/20180524002215.jpg" alt="横長"></a></figure>
    <p class="title"><a href="http://idr-zz.hatenablog.com" target="_blank">ぶろぐのたいとる、ぶろぐのたいとる、ぶろぐのたいとる2</a></p>
  </li>
    <li><figure><a href="http://idr-zz.hatenablog.com" target="_blank"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/i/idr_zz/20180524/20180524002225.jpg" alt="縦長"></a></figure>
    <p class="title"><a href="http://idr-zz.hatenablog.com" target="_blank">ぶろぐのたいとる、ぶろぐのたいとる、ぶろぐのたいとる3</a></p>
  </li>
</ul>

h1 {
  text-align: center;
}

.of {
  padding: 0;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  border-top: 1px dotted #ccc;
}

.of li {
  list-style: none;
  display: flex;
  border-bottom: 1px dotted #ccc;
}

.of figure a {
  display: block;
  background: #eee;
  width: 100px;
  height: 100px
}

.of img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  font-family: 'object-fit: cover;';
}

.of a:hover {
  opacity: 0.7;
}

.of .title a {
  color: #333;
  font-size: 20px;
}

//objedt-fit（IE対策）
objectFitImages();