image cropping with css to keep proper scale effect

Question

I have different images and I want to keep them in a same height and width.

My code structure is:

<figure>
    <img src="..img/image.png" />
</figure>

I have about four of these elements.

My css are:

figure{
 overflow: hidden;
 max-height: 200px;
}

.thumbnail figure img {
  max-height: 200px;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
 }

This is helping me to keep the same height and width.

But the problem is:

If i place a image with large pixel ratio it looks large. For example, if I use a pic with a man with high resolution, it shows only the eyes and nose.

What can I do now?

resize (reduce overall image pixels) the image in `mspaint` and save — odedta, Apr 22 '15 at 09:04
@odedta that's a really bad solution for this problem. And `mspaint` come one... — Bram, Apr 22 '15 at 09:07
What's wrong with mspaint? and how is that a bad solution? if the image height is 200px, why cram a 3000 pixels image into it? — odedta, Apr 22 '15 at 09:08
@muhaimin have you tried giving it a `width` in `%`? like `width:30%`. I think you have to declare a `width` tag on your image so it will re-size it. — Bram, Apr 22 '15 at 09:09
If you can use it in a background image, use `background-size: cover;` http://caniuse.com/#feat=background-img-opts — romuleald, Apr 22 '15 at 09:12
How about a fixed `height: 200px` (and `display: block`)? You keep the ratio and it will scale. The overflow can handle larger widths. Perhaps a `text-align: center;` to finalize it. — Tim Vermaelen, Apr 22 '15 at 09:39
@TimVermaelen not working with `height:200px` and `display:block` :( — muhaimin, Apr 22 '15 at 09:51
Does this answer your question? [How to automatically crop and center an image](https://stackoverflow.com/questions/11552380/how-to-automatically-crop-and-center-an-image) — icc97, Sep 06 '22 at 09:23

Akash Pinnaka · Answer 1 · 2015-11-13T20:21:33.830

I think this might be useful to you.

give the max-height: 200px just as you like. suppose if your normal image has dimensions 400X400(in pixels), you can crop the image to 200px but you are saying that is fine. Your problem starts with images with higher resolution. In this case you give max-width of figure to 200px and lower the height and width of the image than the original size. Suppose your image has dimensions 800X800(in pixels), reduce width and height of the image, say (width: 400px; height: 400px;), then you may see atleast face instead of only having nose or eyes. If you want to see more part of image, you should reduce the size of image much lower.

But i suggest you to compress the image if u have high resolution images. (http://www.resize-photos.com/)

I think it should work. Please post the result if this doesn't works

figure{
 overflow: hidden;
 max-height: 200px;
}

.thumbnail figure img {
  max-height: 200px;
  width: (lower than original width);
  height: (lower than original height);
  position: relative;
  left: 50%;
  transform: translateX(-50%);
 }

score 0 · Answer 2 · answered Jan 10 '16 at 12:43

This might be a solution to your problem, if you specify the max-width for the img separate it will constrain very large images from becoming useable

figure{
 overflow: hidden;
 max-height: 200px;
}

.thumbnail figure {
  max-height: 200px;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
 }

 img {
   max-height: 500px;
 }

https://jsfiddle.net/jwyjwrej/

image cropping with css to keep proper scale effect

My code structure is:

My css are:

But the problem is:

2 Answers2