裁剪和中心图像而不使用背景图像 [英] Crop and center image without using background-image

问题描述

我想在一个页面上创建大小相同的几个图片，我想裁剪和居中的源图像，而不调整它们的大小。我找到了几个答案，做我需要的（例如这里），但他们似乎都使用背景图像。我的图像，虽然，使黑色和白色，并改变颜色时，悬停在上面，所以他们是自己的类，我不能使用背景图像解决方案。

希望有意义，这是很晚。请让我知道，如果有任何方法做中心/裁剪没有背景图像，或者另一种背景图像的b / w->颜色效果。感谢！

解决方案

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

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

  .center-cropped {width：100px; height：100px;位置：相对; overflow：hidden; border：1px solid black; margin：0 auto;}。center-cropped img {position：absolute; top：50％;左：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/200x200alt =/>< / div>  

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

I'm trying to create several images on a page that are the same size, and I'd like to crop and center the source images without resizing them. I've found several answers that do what I need (like here), but they all seem to use background-image. My images, though, are made so that they are black and white and change to color when hovered over, so they are their own class and I can't use the background-image solutions.

Hope that makes sense, it's pretty late. Please let me know if there's any way to do the centering/cropping without background-image, or alternatively have the b/w->color effect on a background-image. Thanks!

解决方案

If using CSS transforms is an option, it can be done even if the dimensions of the images are unknown.

They key point is that a percentage value on translate() notation is relative to the size of bounding box, while a percentage value on top/left properties refers to the size of the box's containing 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>

It's worth noting that CSS transforms are supported in IE9+.

这篇关于裁剪和中心图像而不使用背景图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！