Question

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

第二件事是，有时候我的图像适合90px的盒子，但有时会有更大的尺寸，我想在裁剪之前缩放它们以适应盒子。有没有办法做到这一点？

<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上的列，并在display: inline-block上使用了li。

裁剪的图像设置在两列中

1 个答案: