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

Question

我有一个长方形的图像，像这样。

我希望它在一页中这样显示

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

有没有办法在 img 标签中使用 CSS 背景图片或 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 来做到这一点。

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

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

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

Display rectangle image as a square cropped image css

html

css

image