0

I've got some big images, I need to resize and crop. I want to set them up to 250x in width - that's easy in css. But I also want to maintain aspect ratio and while doing that I end up with images of varying height. Now, I'd like to crop them from hight to ensure that every image that's for example 250x or bigger in height would be cropped (centered preferrably). How would I go about doing that?

EDIT: Ok, I think I wasn't clear in my original post. What I want is: resize the image to 250px in width. If height is >150px, shrink the image while keeping the 250px width.

user2344435
  • 13
  • 1
  • 3
  • Check out this [article](https://selbie.wordpress.com/2011/01/23/scale-crop-and-center-an-image-with-correct-aspect-ratio-in-html-and-javascript/). Goes over the topic pretty in depth. – Steven B. Apr 20 '16 at 21:15
  • @lamelemon Thanks for the link. I'm getting very mixed results here. Sometimes it scales it fine, but usually it just chenges the picture to 0x6 for some reason. But his demo seems to be working. – user2344435 Apr 20 '16 at 21:57

2 Answers2

0

Try something like this:

<div style="position:absolute;top:0;left:0;width:250px;height:250px;overflow:hidden;">
    <div style="position:relative;top:0;left:0;height:250px;">
         <img style="height:100%;min-height:250px" src="path/to/img" />
    </div>
</div>
Erik Grosskurth
  • 3,762
  • 5
  • 29
  • 44
  • Hey Erik, thanks for your answer. Unfortuantely it's not workign as intended: https://jsfiddle.net/6xnf91rr/ I wanted the image to be stuck at 250px but to be shown in full and crop all borders if height is above say 150px. – user2344435 Apr 20 '16 at 21:31
  • Play around with the widths and heights on the different divs until it gives you the desired effect. I am having trouble understanding exactly what it is you want. Thanks. – Erik Grosskurth Apr 20 '16 at 21:35
0

If you want to maintain aspect ratio use % width & set height to auto.

<div style="width:250px;height:250px;overflow:hidden;">
    
         <img style="width:100%;height:auto;" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQ3TbEJkubLP_qomeNunFXpKrweFBAitDgsGGADiKVzNICNZ5a6" />
    
</div>

Another option is to set the image as background image and contain/cover it. background-size:contain; or background-size:cover;. 

.center-cropped {
  height: 150px;//Crop if height>150
  background-position: center center;
  background-repeat: no-repeat;
}
<div class="center-cropped" 
     style="width:250px;background-image:url(https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQ3TbEJkubLP_qomeNunFXpKrweFBAitDgsGGADiKVzNICNZ5a6);">
</div>

Refer : Crop & center image

Community
  • 1
  • 1
Ani Menon
  • 27,209
  • 16
  • 105
  • 126