Crop an image to desired aspect and then resizing it

Question

Hi I want to achieve the following :

1. Crop an image to a desired aspect ratio (lets say 2:1)
2. Then let it resize automatically to fit into a box.

I want cropping because I have many boxes(divs) of fixed ratio(2:1). If I don't crop to desired aspect-ratio, then images will expand or shrink to fit into the box. The other solution to this problem is letter-boxing the image which again I don't want.

Can someone point out a solution to this.

For eg : If image is 100px X 100px, I first want to crop it to 66px X 33 px and then allow it to expand, shrink to fit my box all of which are 2:1.

Answer 1

If you don't literally need to rewrite the file to a different size, you could effectively mask the image inside another element with css, for instance:

div {
 /* Image SRC */
 background: url(image.jpg) no-repeat center center fixed;

 /* Use Background Size Cover to Proportionally Fill Element */
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;

 /* Size Element to Desired Background Ratio */
 width: 200px;
 height: 100px;
}

If you do need generate downloadable cropped images, you'll have to use some server side code like PHP to generate the images, see this question for more details: Crop image in PHP