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

Question

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

我想做的是拍摄矩形图像并使用 CSS 使它们看起来是方形的，而不会扭曲图像。

我基本上想把这个：

进入这个：

原文由 novicePrgrmr 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

假设它们不必在 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 }

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

原文由 Michael 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

没有包装器的纯 CSS 解决方案 div 或其他无用代码：

 img {
  object-fit: cover;
  width: 230px;
  height: 230px;
}

原文由 Peter Kionga-Kamau 发布，翻译遵循 CC BY-SA 4.0 许可协议