Question

我正在尝试在相同大小的页面上创建多个图像，并且我希望裁剪和居中源图像而不调整它们的大小。我找到了几个能够满足我需要的答案（如here），但它们似乎都使用了背景图像。但是，我的图像是黑色和白色的，并且在翻转时会变成颜色，所以它们是他们自己的类，我不能使用背景图像解决方案。

希望这是有道理的，现在已经很晚了。如果没有背景图像可以进行居中/裁剪，或者在背景图像上有b / w->颜色效果，请告诉我。谢谢！

Answer 1

如果使用CSS transforms是一个选项，即使图片的尺寸为未知，也可以完成。

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

.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转换。

Answer 2

如果您的图片是200px 200px

div { position:relative; } //parent container
img {
position: absolute;
top: 50%;
left: 50%;
margin-left:-100px;
margin-top:-100px;
}

裁剪和中心图像不使用背景图像

2 个答案: