2

Let me explain with an example.

Lets say I have an Image of size

960px X 668px

I have a div which holds this image. The div size is
154px X 75px

This div can have any variable size.

If we see that the aspect ratio of image and the aspect ratio of the div 
that holds image are different.

All i need to do is Resize and Crop the Image using PHP in such a way that it takes maximum possible height and width of the original size and also maintain the aspect ratio of the div that holds this image. I just need a logic to calculate a percentage that by how much DIV width and height should be multiplied so that the resulting size is closer to the image size but doesnot exceed the image size and also the aspect Ratio will be same as that of DIV but not of image.

Thanks Sharmila

Sharmila
  • 261
  • 1
  • 4
  • 14
  • @MarcB, well, the link you suggests how to Resize an Image so that it perfectly fits in the placeholder div without being stretched. My problem is by how much percentage the width and height of placeholders should be increased so that the resulting size doesnot exceed the Original image size and maintains the aspect ratio of the placeholder width and height. – Sharmila Apr 17 '13 at 17:20
  • I am not able to understand that why you want to multiply div dimensions with same aspect ration.If the aspect ration going to be different then some part of the image will be cut off. – Tarun Apr 17 '13 at 17:59
  • @Tarun. Acutally I m generating a PDF, Initially the image is resized and cropped to match the exact size of the placeholder div. This way it didn't work well, the image in resulting PDF is too blurred(because Image is downscaled and cropped to match placeholder's size). Now I want to crop and resize the image with same aspect ratio as placeholder but this time with bigger size, so that the generated PDF will have crisp image. I hope you understood what I mean – Sharmila Apr 17 '13 at 18:07
  • If i am understanding you correctly then you are trying to say that with what number you should multiply div width and height(154 and 75) so that the resultant width comes closer to image height and width(960 and 668).Then you can do this as follow.If we need 154px width for 75px height then for 960 px width we will need (75/154)*960 px height i.e 468 px.So (960,468) is closer to your image heigh and width and have same aspect ration as of div – Tarun Apr 20 '13 at 06:29

1 Answers1

1

Ok, then you need to check if you'll use the width ratio or the height ratio.

img.with / div.with = ratio_w
img.height / div.height = ratio_h

Then, the higher ratio is the ratio you need to use to be sure your image fit the div.

With your example, we have

ratio_w = 960 / 154 = 6.2
ratio_h = 668 / 75 = 8.9

ratio_h is the higher, so ratio_h is your ratio

Then, in order to fit your div, here is the resize calcul

960 / 8.9 = 108
668 / 8.9 = 75

The logic is the same with other values.

If there wasn't a resize matter, i would recommend to check this CSS property

background-size: contain;
Aurélien Grimpard
  • 918
  • 10
  • 24
  • well width height ratio of div `= 154/75=2.05 `, and the width height ratio of your result is `108/75=144` which is not equal to the ratio of DIV. Acutally I m generating a PDF, Initially the image is resized and cropped to match the exact size of the placeholder div(the method you specified). This way it didn't work well, the image in resulting PDF is too blurred(because Image is downscaled and cropped to match placeholder's size). Now I want to crop and resize the image with same aspect ratio as placeholder but this time with bigger size, closer to the Original width & height of the image – Sharmila Apr 17 '13 at 18:33
  • To whoever downvote, give a reason at least, thanks ... – Aurélien Grimpard Sep 12 '13 at 13:14