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

Question

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

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

我基本上想把这个：

对此：

Answer 1

如果图像位于具有响应宽度的容器中：

.rect-img-container {
  position: relative;
}

.rect-img-container::after {
  content: "";
  display: block;
  padding-bottom: 100%;
}

.rect-img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

<div class="rect-img-container">
  <img class="rect-img" src="https://picsum.photos/id/0/367/267" alt="">
</div>

Answer 2

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

<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 }

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

Answer 3

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

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