css - 在不使用背景图像的情况下裁剪和居中图像

Question

我想在一个页面上创建多个大小相同的图像，我想裁剪源图像并将其居中而不调整它们的大小。我找到了几个满足我需要的答案(如 here )，但它们似乎都使用背景图像。不过，我制作的图像是黑白的，悬停时会变为彩色，因此它们是它们自己的类，我不能使用背景图像解决方案。

希望这是有道理的，已经很晚了。请让我知道是否有任何方法可以在没有背景图像的情况下进行居中/裁剪，或者对背景图像产生 b/w->color 效果。谢谢!

Answer 1

如果使用 CSS transforms是一个选项，即使图像的尺寸未知也可以这样做。

他们的关键点是 translate() 符号的百分比值是相对于 bounding box 的大小的。 ，而 top/left 属性的百分比值指的是框的包含 block 的大小。

.center-cropped {
  width: 100px;
  height: 100px;
  position: relative;
  overflow: hidden;

  border: 1px solid black;
  margin: 0 auto;
}

.center-cropped img {
  position: absolute;
  top: 50%; left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

<div class="center-cropped">
    <img src="http://placehold.it/200x200" alt="" />
</div>

值得注意的是，IE9+ 支持 CSS 转换。