html - 如何使用CSS将矩形图像“裁剪”为正方形？

我知道用CSS实际修改图像是不可能的，这就是为什么我将庄稼放在引号中。

我想做的是拍摄矩形图像，并使用CSS使它们显示为正方形，而不会扭曲图像。

我基本上想转这个：



变成这个：

最佳答案

假设它们不必位于IMG标签中...

HTML：

<div class="thumb1">
</div>

CSS：

.thumb1 {
  background: url(blah.jpg) 50% 50% no-repeat; /* 50% 50% centers image in div */
  width: 250px;
  height: 250px;
}

.thumb1:hover { YOUR HOVER STYLES HERE }

编辑：如果div需要链接到某个地方，只需调整HTML和样式，如下所示：

HTML：

<div class="thumb1">
<a href="#">Link</a>
</div>

CSS：

.thumb1 {
  background: url(blah.jpg) 50% 50% no-repeat; /* 50% 50% centers image in div */
  width: 250px;
  height: 250px;
}

.thumb1 a {
  display: block;
  width: 250px;
  height: 250px;
}

.thumb1 a:hover { YOUR HOVER STYLES HERE }

请注意，这也可以修改为响应式的，例如宽度和高度百分比等。