相关疑难解决方法(0)

我需要始终使用CSS将随机大小的图像裁剪为正方形160x160.裁剪后图像应保持居中.

我的标记应该是:

<a href="#" class="cropper">
   <img src="image" alt="description" />
</a>

搜索在计算器上我找到了一些答案(如本),但他们不为情况下,你的图像可以是更大的工作水平(宽)或垂直(高).

具体而言,我需要能够呈现一个都像这样宽的图像和类似这样的高图像在正方形的形式,没有预先知道哪一个是呈横长方形或垂直矩形.它还应该支持已经平方的图像.

我在创建带有肖像图像的自举网格时遇到了问题.当我使用肖像图像时,它看起来不太好.如果我只使用风景图像,它看起来应该是这样.我该如何解决这个问题？

这是代码:

<div class="col-md-3 col-sm-4 col-xs-6 thumb">
   <div class="thumbnail" href="#">
      <a href="#"><img class="img-responsive" src="http://placehold.it/400x266" alt=""></a>
      <div class="caption">                                                
        <a href="#" class="btn btn-shopping btn-responsive"><i class="glyphicon glyphicon-shopping-cart"></i></a>
      </div>
   </div>
</div> 

<div class="col-md-3 col-sm-4 col-xs-6 thumb">
   <div class="thumbnail" href="#">
      <a href="#"><img class="img-responsive" src="http://placehold.it/400x266" alt=""></a>
      <div class="caption">                                                
        <a href="#" class="btn btn-shopping btn-responsive"><i class="glyphicon glyphicon-shopping-cart"></i></a>
      </div>
   </div>
</div> 

<div class="col-md-3 col-sm-4 col-xs-6 thumb">
   <div class="thumbnail" href="#">
      <a href="#"><img class="img-responsive" src="http://placehold.it/266x400" alt=""></a>
      <div class="caption">                                                
        <a href="#" class="btn btn-shopping btn-responsive"><i class="glyphicon glyphicon-shopping-cart"></i></a>
      </div>
   </div>
</div> 

 <div class="col-md-3 col-sm-4 …