- Dynamically Resizing/Cropping Pictures

I need to display a bunch of pictures that are all of various dimensions
into a fixed dimension space, like MSN Messenger does with its user photos
in the chat windows.

Forcing image dimensions will warp the proportions, so that's no good.

Forcing one coordinate while leaving the other flexible will maintain
proportions, but the x,y values won't be consistant from picture to picture.

I considered the MSN Messenger method of bringing one of the coordinates to
100 pixels, and then showing only PART of the information of the other
coordinate. I'm not sure if you guys know what I'm talking about, but
Messenger will shrink (for example) the width to 100 pixels, keep the height
proportionate, but only show the middle 100 pixels of the height (or is it
the other way around? no matter).

How can I do something similar? Perhaps involving placing an image as a
background instead of a foreground element?

How can I recreate the MSN Messenger formula for displaying images in
constant dimensions without losing the proportions (but losing unnecessary
sections of the image)?

Thanks.

"Jon Yeager" <1@1.1> wrote:

I need to display a bunch of pictures that are all of various dimensions
into a fixed dimension space, like MSN Messenger does with its user photos
in the chat windows.

Forcing image dimensions will warp the proportions, so that's no good.

Forcing one coordinate while leaving the other flexible will maintain
proportions, but the x,y values won't be consistant from picture to picture.

I considered the MSN Messenger method of bringing one of the coordinates to
100 pixels, and then showing only PART of the information of the other
coordinate. I'm not sure if you guys know what I'm talking about, but
Messenger will shrink (for example) the width to 100 pixels, keep the height
proportionate, but only show the middle 100 pixels of the height (or is it
the other way around? no matter).

How can I do something similar? Perhaps involving placing an image as a
background instead of a foreground element?

How can I recreate the MSN Messenger formula for displaying images in
constant dimensions without losing the proportions (but losing unnecessary
sections of the image)?

Browsers do a poor job when resizing images, better change the actual
images.

--
Spartanicus

Sorry, not an option.

Still looking for help on the below problem, if anyone has any to offer!

"Spartanicus" <me (AT) privacy (DOT) net> wrote

"Jon Yeager" <1@1.1> wrote:

I need to display a bunch of pictures that are all of various dimensions
into a fixed dimension space, like MSN Messenger does with its user
photos
in the chat windows.

Forcing image dimensions will warp the proportions, so that's no good.

Forcing one coordinate while leaving the other flexible will maintain
proportions, but the x,y values won't be consistant from picture to
picture.

I considered the MSN Messenger method of bringing one of the coordinates
to
100 pixels, and then showing only PART of the information of the other
coordinate. I'm not sure if you guys know what I'm talking about, but
Messenger will shrink (for example) the width to 100 pixels, keep the
height
proportionate, but only show the middle 100 pixels of the height (or is
it
the other way around? no matter).

How can I do something similar? Perhaps involving placing an image as a
background instead of a foreground element?

How can I recreate the MSN Messenger formula for displaying images in
constant dimensions without losing the proportions (but losing
unnecessary
sections of the image)?

Browsers do a poor job when resizing images, better change the actual
images.

--
Spartanicus

"Jon Yeager" <1@1.1> wrote:

Please don't top post here, corrected this once.

I need to display a bunch of pictures that are all of various dimensions
into a fixed dimension space, like MSN Messenger does with its user
photos in the chat windows.

Browsers do a poor job when resizing images, better change the actual
images.

Sorry, not an option.

Why not?

Still looking for help on the below problem, if anyone has any to offer!

Sorry not possible. You can achieve the uniform dimensions by coding the
image as a centered background image to a fixed width block level
element, but there is no way to invoke the browsers resizing mechanism
for background images.

HTH

--
Spartanicus

In article <c88d4t$mga$1 (AT) news (DOT) wplus.net>,
"Jon Yeager" <1@1.1> writes:

Sorry, not an option.

Still looking for help on the below problem, if anyone has any to offer!

I've recently developed output filters for Apache to resize (and process)
images on-the-fly according to negotiated browser preferences.

If something like that would help, I'll be happy to discuss it with you.
But it's not an off-the-shelf solution, so I'd have to charge you time.

--
Nick Kew

Nick's manifesto: http://www.htmlhelp.com/~nick/

"Spartanicus" <me (AT) privacy (DOT) net> wrote

"Jon Yeager" <1@1.1> wrote:

Please don't top post here, corrected this once.

I have no idea what this means (embarassed look).

Browsers do a poor job when resizing images, better change the actual
images.

Sorry, not an option.

Why not?

Images will be coming in at 50 per day and there is no manpower to do this
manually. There would have to be somekind of automated server-side script
that would do it, and since it would do it destructively (as opposed to
"live" or "dynamically" without affecting the source) it is too much of a
gamble to take to let a script determine where to crop.

Still looking for help on the below problem, if anyone has any to offer!

Sorry not possible. You can achieve the uniform dimensions by coding the
image as a centered background image to a fixed width block level
element, but there is no way to invoke the browsers resizing mechanism
for background images.

If it cannot be done, then that's what I needed to know. I just wanted
somekind of confirmation (although I wonder how MSN Messenger does it?)

So there is nothing in the world of HTML / DHTML / CSS / Javascript / etc.
that can reproduce the behavior of images in the MSN Messenger chat windows?
It's strictly a C++ thing?

"Jon Yeager" <1@1.1> wrote:

Please don't top post here, corrected this once.

I have no idea what this means (embarassed look).

Placing a reply above quoted text, this is not appreciated in this
group.

Images will be coming in at 50 per day

If these images are going to be uploaded by the public then you really
need to process them, most users are ignorant regarding things like
image dimensions, file formats and sizes that work on the web. You'll
get 2Mb 1600 x 1024 jpegs, or BMP's.

and there is no manpower to do this
manually. There would have to be somekind of automated server-side script
that would do it, and since it would do it destructively (as opposed to
"live" or "dynamically" without affecting the source)

No need to destroy the source if you don't want that, create new images.

it is too much of a
gamble to take to let a script determine where to crop.

So don't crop, just resize if that's what you want.

Sorry not possible. You can achieve the uniform dimensions by coding the
image as a centered background image to a fixed width block level
element, but there is no way to invoke the browsers resizing mechanism
for background images.

If it cannot be done, then that's what I needed to know. I just wanted
somekind of confirmation (although I wonder how MSN Messenger does it?)

So there is nothing in the world of HTML / DHTML / CSS / Javascript / etc.
that can reproduce the behavior of images in the MSN Messenger chat windows?

I don't know MSN Messenger, so I can't comment on it. What I can say is
that you seem to reject the obvious and proper solution to this problem
for no obvious reason.

--
Spartanicus

"Spartanicus" <me (AT) privacy (DOT) net> wrote

"Jon Yeager" <1@1.1> wrote:

If it cannot be done, then that's what I needed to know. I just wanted
somekind of confirmation (although I wonder how MSN Messenger does it?)

So there is nothing in the world of HTML / DHTML / CSS / Javascript /
etc.
that can reproduce the behavior of images in the MSN Messenger chat
windows?

I don't know MSN Messenger, so I can't comment on it. What I can say is
that you seem to reject the obvious and proper solution to this problem
for no obvious reason.

In all fairness, what you see as "the obvious and proper solution to this
problem" (ie, destructively manually cropping the images at the source) is
different from what Joe, Mike or John would have seen as "the most obvious
solution" (for instance, someone else didn't understand why I didn't just
resize the largest variable, and just leave blank space around the other
coordinate (which would be more narrow than the alotted space). It would
FIT, but it wouldn't fill out the area completely.

Basically, though I appreciate the suggestions, none of these do what I want
to do -- which to me, is the best reason of all for rejecting them, until it
has been proven that what I need to be done cannot be done.

I have a 100px/120px area to fill with uploaded pictures of people in
various dimensions. I need that 100x120 area filled completely, while NOT
stretching either of the two coordinates.

Now there is nothing "obvious" or "proper" about your suggestion which does
not accomplish this -- but rather, proposes one of the many "Plan B"
alternatives. But before falling back on Plan B, I simply wanted to make
sure Plan A was not do-able.

MSN Messenger does Plan A with no problems, but they don't do it in HTML.
They do it in C++ so it is quite possible that a website simply cannot do
what I'm asking -- and confirmation of that is all I was seeking before
considering the alternatives. It's not in my nature to give up on an idea so
quickly. I simply wanted to make sure it could not be done. I'm sure you
understand.

"Jon Yeager" <1@1.1> wrote:

In all fairness, what you see as "the obvious and proper solution to this
problem" (ie, destructively manually cropping the images at the source) is
different from what Joe, Mike or John would have seen as "the most obvious
solution"

Not only do you persist in giving no valid reason why the proposed
solution is not the correct approach, you are apparently so threatened
by it that you felt it was necessary to once again suggest that the
proposed solution required manual work and/or destruction of the
originals, both assumptions were incorrect the first time you mentioned
this, and they still are.

--
Spartanicus

Jon Yeager wrote:
[snip]

I have a 100px/120px area to fill with uploaded pictures of people in
various dimensions. I need that 100x120 area filled completely, while NOT
stretching either of the two coordinates.
[snip]

Seems to me that these are two contradicting goals. But if it is OK to
use Javascript to do this, check out what eBay uses for resizing the
smaller-sized photo at the top of an item listing.

= Eric