Checking image width/height and determine what image box to place it in

Hey all I have the following image box' sizes on my WPF form:
 Box |Width |Height
 ----|------|------
 1   |357   |272
 ----|------|------
 2   |357   |272
 ----|------|------
 3   |365   |460
 ----|------|------
 4   |365   |265
 ----|------|------
 5   |715   |455
 ----|------|------
 6   |360   |465
 ----|------|------
 7   |360   |465
 ----|------|------
 8   |360   |465
 ----|------|------
 9   |540   |290
 ----|------|------
 10  |540   |290

Open in new window

So visually it would look something like this:
 --------------------------
 |       |        |       |
 |   1   |    2   |       |
 |----------------|   3   |
 |                |       |
 |                |-------|
 |       5        |       |
 |                |   4   |
 |------------------------|
 |        |       |       |
 |   6    |   7   |   8   |
 |        |       |       |
 |------------------------|
 |            |           |
 |     9      |     10    |
 --------------------------

Open in new window

So what my goal is is to get the current image I am wanting to place into a box and get its width and height and from that determine the best box to place it in so that it will show the image:

- Without black borders on either the left/right or top/bottom (or both).
- Not chop off the important areas of the image (mostly the middle section moving out).

I have decided to use Magick.NET in order to ease the pain of doing something like this from scratch. So when I determine what box I will be placing the image into then I can use the Magick.NET to crop it using:

Resize with something like this:
imgStream.Crop(width, height, Gravity.Center);

Open in new window

or
MagickGeometry size = new MagickGeometry(width, height);
size.IgnoreAspectRatio = maintainAspectRatio;
// Adjust geometry offset to center of image (same as `-gravity Center`)
size.Y = imgStream.Height / 2 - height / 2;
size.X = imgStream.Width / 2 - width / 2;
imgStream.Crop(size);

Open in new window

So to sum up the above - I am in need of finding the best box to place the image into before I go and use Magick.NET on it.
StealthrtAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

d-glitchCommented:
You can simplify your problem by calculating the aspect ratio for each of your boxes.  This is ratio of width/height.

AR > 1 is a Landscape orientation.    AR < 1 is a Portrait.    AR = 1 is a Square.

You have ten boxes, but only six aspect ratios.  That makes the problem a little easier right off the bat.  
You can calculate the aspect ratio of you images, and then pick the box with the closest fit.
0
StealthrtAuthor Commented:
Mind showing this in code?
0
d-glitchCommented:
I can't do code because you don't have any examples images.  But here is some additional information.

Here are the AR's for your available boxes:    357 / 272 = 1.31     [1, 2]
                                                                                365 / 460 = 0.79     [3]
                                                                                365 / 265 = 1.38     [4]
                                                                                715 / 455 = 1.57     [5]
                                                                                360 / 465 = 0.77     [6, 7, 8]
                                                                                540 / 290 = 1.86     [9, 10]

Let's say one of your images is a VGA Screen shot:  640 x 480.  The RA is 640 / 480 = 1.33.  You have two choices of where to put it:  
  • Boxes 1 and 2 have RA = 1.31 which is a little too narrow.  So fit the height and trim the left and/or right sides.
  • Box 4 has RA = 1.38 which is a little to tall.  So fit the width and trim the top and/or bottom.
1

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
StealthrtAuthor Commented:
Ok here is a real-world example:

 
1)  960/720  = 1.33
2) 1440/800  = 1.8
3) 1078/1440 = 0.74
4) 2048/1152 = 1.77
5) 1440/1080 = 1.33
6)  960/528  = 1.81

Open in new window


So following your example:

357 / 272 = 1.31     [1, 2]
365 / 460 = 0.79     [3]
365 / 265 = 1.38     [4]
715 / 455 = 1.57     [5]
360 / 465 = 0.77     [6, 7, 8]
540 / 290 = 1.86     [9, 10]

Image 1 would be in BOX 4
Image 2 would be in BOX 9 or 10
Image 3 would be in BOX 6, 7, or 8
Image 4 would be in BOX 9 or 10
Image 5 would be in BOX 4
Image 6 would be in BOX 9 or 10

Would that be correct?
0
d-glitchCommented:
Yes.  Those are definitely the best fits.  

In this example, you have three wide images [ 1.80, 1.77, 1.81]  and only two optimum slots on the page.
You could decide to put the RA 1.77 image in Box 4, or keep it for the next page.

You will still have to make aesthetic decisions at some level.  For example, you may have to trade off keeping groups of images together and filling pages completely.
1
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Images and Photos

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.