0

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!

Community
  • 1
  • 1
user3622688
  • 61
  • 1
  • 8

2 Answers2

1

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+.

Hashem Qolami
  • 97,268
  • 26
  • 150
  • 164
0

If your image is 200px 200px 

div { position:relative; } //parent container
img {
position: absolute;
top: 50%;
left: 50%;
margin-left:-100px;
margin-top:-100px;
}
N Kumar
  • 1,302
  • 1
  • 18
  • 25