Html 裁剪图像设置为两列

我在两列中将图像裁剪为方形，但您可以看到第二个图像的一半在第一列，另一半在第二列。它发生在奇数个图像上。我怎样才能解决这个问题

第二件事是，有时我的图像适合90px的盒子，但有时会有更大的，我想在裁剪之前缩放它们以适合盒子。有什么好办法吗

小提琴：

小马
小马
小马

保险商实验室{
栏目：2个；
-webkit栏目：2个；
-moz列：2个；
}
.形象{
背景：url(http://wswieciekucykow.blog.pl/files/2014/06/pony4.png)50%50%不重复；
宽度：90px；
高度：90px；
}
.图a{
显示：块；
宽度：90px；
高度：90px
}
李.内容{
左侧填充：20px；
}
li.image，li.content{
显示：表格单元格；
垂直对齐：顶部；
}

你想要点什么吗

我使用了

背景大小：100%100%

使图像适合容器

---

我删除了

ul

上的列，并在

li

上使用了

display:inline block

，因为它不适用于矩形图像。这些图片应该缩放并裁剪成正方形，而不是压缩以适合盒子。这不是因为我想在裁剪之前缩放一点，因为我看不到图片的一小部分。但它可能需要javascript而不是css。感谢您修复了将图像分为两列的功能。您可以使用CSS和背景大小来获得所需的输出：谢谢。这正是我想要的。

<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;
}