İki sütunta kırpılmış görüntüler

Question

İki sütunda kare şeklinde kırpılan resimlerin var, ancak ikinci görüntünün yarısının ilk sütunda olduğunu ve ikinci yarının ikinci sütunda olduğunu görebilirsiniz. Tek sayıdaki görüntülerde olur. Bunu nasıl düzeltebilirim?

Ve ikinci şey bazen resimlerimin 90px kutusuna sığmasıdır, ancak bazen önemli ölçüde daha büyüktür ve kutuya sığmadan önce bunları ölçeklendirmek istiyorum. Bunu yapmanın iyi bir yolu var mı?

keman:

<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

https://jsfiddle.net/1qjf2thq/ Bir şey like this ister misin?

Görüntüyü kapsayıcıya uygun hale getirmek için background-size : 100% 100%; kullanıyorum.

ul'daki sütunları kaldırdım ve li numaralı telefondan display: inline-block kullandım.