将矩形图像显示为方形裁剪图像css

Question

我有一个形状为矩形的图像，就像这样。

我希望它在一个页面中显示如下

因为我需要在另一个页面中使用矩形图像，所以很难有裁剪版本和矩形版本。

是否有办法使用CSS背景图片或img标签中的css将图像的裁剪方式显示为正方形。

谢谢

Answer 1

只需使用背景图像和定位

<div style="background-image: url('http://i.stack.imgur.com/SXHMg.jpg'); background-position: center; background-repeat: no-repeat; width: 400px; height: 335px; ">
</div>

http://jsfiddle.net/ycs1s9f9/

Answer 2

见下面的样本。我使用Background-position来做到这一点。

＆＃13;

＆＃13;

#myimg
{
  background:url('http://i.stack.imgur.com/SXHMg.jpg');
  background-position:-290px -340px;
  width:380px;
  height:320px;
  }

＆＃13;

<div id="myimg">
  </div>

＆＃13;

＆＃13;

＆＃13;