html - 在两列中设置的裁剪图像

Question

我将图像裁剪成两列的正方形，但您可以看到第二张图像的一半在第一列中，后半部分在第二列中。它发生在奇数张图像上。我该如何解决这个问题？

第二件事是，有时我的图像适合 90 像素的框，但有时会大得多，我想在裁剪以适合框之前缩放它们。有什么好的方法吗？

fiddle :https://jsfiddle.net/1qjf2thq/

<ul>
  <li><div class="image"><a href="#" target="_blank"></a></div><div class="content">pony</div></li>
  <li><div class="image"><a href="#" target="_blank"></a></div><div class="content">pony</div></li>
  <li><div class="image"><a href="#" target="_blank"></a></div><div class="content">pony</div></li>
</ul>

ul {
    columns: 2;
    -webkit-columns: 2;
    -moz-columns: 2;
}

.image {
  background: url(http://wswieciekucykow.blog.pl/files/2014/06/pony4.png) 50% 50% no-repeat; 
  width: 90px; 
  height: 90px;
}

.image a {
  display: block; 
  width: 90px; 
  height: 90px
}

li .content {
    padding-left: 20px;
}

li .image, li .content { 
    display: table-cell;
    vertical-align: top;
}

Answer 1

你想要一些东西like this ？

我使用 background-size : 100% 100%; 使图像适合容器。

我删除了 ul 上的列，并在 li 上使用了 display: inline-block。