CSS "crop" images, but align in center vertically

Question

I'm currently cropping images with CSS as so:

<div class="crop">
    <img src="image.png" alt="">
</div>

.crop {
width: 150px;
height: 150px;
overflow: hidden;
}
.crop img {
width: 150px;
height: auto;
margin: 0 0 0 0;
}

This way, it aligns the image within the container horizontally. However, I have no idea how to align the image vertically in the center (so it's right in the middle). Any help?

I think it will be much easier by using css "clip" http://www.w3schools.com/cssref/pr_pos_clip.asp — RanSch, Jul 10 '14 at 14:00
possible duplicate of [How to vertically align an image inside div](http://stackoverflow.com/questions/7273338/how-to-vertically-align-an-image-inside-div) — hitautodestruct, Jul 10 '14 at 14:08

score 8 · Answer 1 · answered Apr 21 '17 at 13:31

/* Just gonna leave this here.. */

.crop {
    position: relative;
    overflow: hidden;
    height: 180px;
    margin: 8px;
}
.crop img {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}

score 1 · Answer 2 · answered Feb 03 '20 at 09:03

Use these classes :


.center-crop-img {
  object-fit: none; /* Do not scale the image */
  object-position: center; /* Center the image within the element */
  width: 100%;
}

.center-crop-img-cover {
  object-fit: cover; /* cover image */
  object-position: center; /* Center the image within the element */
  width: 100%;
}

.center-crop-img-contain {
  object-fit: contain; /* contain the image */
  object-position: center; /* Center the image within the element */
  width: 100%;
}

.center-crop-img-scale-down {
  object-fit: scale-down; /* scale-down the image */
  object-position: center; /* Center the image within the element */
  width: 100%;
}

score 0 · Answer 3 · answered Jul 10 '14 at 14:11

0

As suggested by @RanSch, you can crop the image using clip attribute.

.imgClass{
   clip:rect(top,right,bottom,0px);
   margin-top: //someValue or
   vertical-align: middle; //or
   top: //someValue or
}

answered Jul 10 '14 at 14:11

Aravind

609
6
14

Anshuman Singh · Answer 4 · 2014-07-10T14:12:27.107

-1

use

 .crop img{top:50%; left:50%;}

OR USE-

 .crop img{vertical-align:middle;}

edited Jul 10 '14 at 14:12

answered Jul 10 '14 at 14:05

Anshuman Singh

1,134
1
13
21

syntax mistake you need an opening curly brace `{` instead of an opening bracket `(` – hitautodestruct Jul 10 '14 at 14:06
BTW, the above will cause the images top to go down 50% you need to add half the images height using a negative margin for the above code to be effective. – hitautodestruct Jul 10 '14 at 14:07

CSS "crop" images, but align in center vertically

4 Answers4