constrain image size but retain proportions

[J. VerSchave]

I have a bunch of images that are

600x800
800x600
640x480
480x640

I want to use HTML to contrain the size of these images. I basically
want to display them as thumnails. Here is what I am trying to do:

"Display a thumbnail of this image, contraining the largest of the two
dimensions to 100 pixels and set the other dimension to the proper
relative size, scaled appropriately."

I dont want to actually resize the images, I just want them to be
displayed smaller. Is there an easy way to do this with HTML? With
CSS?

[Eric Bohlman]

ca*********@yahoo.com (J. VerSchave) wrote in
news:c5**************************@posting.google.c om:

I have a bunch of images that are

600x800
800x600
640x480
480x640

I want to use HTML to contrain the size of these images. I basically
want to display them as thumnails. Here is what I am trying to do:

"Display a thumbnail of this image, contraining the largest of the two
dimensions to 100 pixels and set the other dimension to the proper
relative size, scaled appropriately."

I dont want to actually resize the images, I just want them to be
displayed smaller. Is there an easy way to do this with HTML? With
CSS?

You can but you really, really, *really* shouldn't. What you're trying to
do is often called "dumbnailing." Especially in photo-gallery situations,
it *sucks*. First of all, all the "dumbnails" take just as long to load as
the full-size images. If, say, you have a gallery of 20 50K photos, you
have to load a whole megabyte just to see the thumbnails. Secondly, most
browsers do a *terrible* job of rescaling images by more than a few
percent. Dumbnails almost always look *severely* distorted. Finally,
dumbnailed pages often really badly slow down browsers; just scrolling or
navigating becomes extremely slow.

That said, dumbnails can be "achieved" by merely setting the height and
width of an image, in either HTML or CSS, to something smaller than the
image's actual dimensions. But the results are going to be *far* from
satisfactory, and if you want your visitors to have a good experience with
your site, you will want to create true thumbnails. Don't inconvenience
all your visitors just to save yourself a little bit of time or learning.

[Barry Pearson]

J. VerSchave wrote:
[snip]

I dont want to actually resize the images, I just want them to be
displayed smaller. Is there an easy way to do this with HTML? With
CSS?

You may have seen the reply from Eric Bohlman, and want a second opinion. Here
it is.

He is absolutely correct.

--
Barry Pearson
http://www.Barry.Pearson.name/photography/
http://www.BirdsAndAnimals.info/
http://www.ChildSupportAnalysis.co.uk/

[Stan Brown]

In article <c5**************************@posting.google.com > in
comp.infosystems.www.authoring.html, J. VerSchave
<ca*********@yahoo.com> wrote:

I want to use HTML to contrain the size of these images.

No, you don't.

You want to use your favorite image editor to create thumbnails, and
have _those_ in your page. N.B. Don't just shrink an image; crop it
first.

If you "use HTML" to constrain the size of images, your visitors
have the worst of it two ways: the full download time, and then an
inferior reduction.

--
Stan Brown, Oak Road Systems, Cortland County, New York, USA
http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator: http://validator.w3.org/
CSS 2 spec: http://www.w3.org/TR/REC-CSS2/
2.1 changes: http://www.w3.org/TR/CSS21/changes.html
validator: http://jigsaw.w3.org/css-validator/

[J. VerSchave]

Luckily for me, I am NOT creating a photo album nor any kind of
massive image viewing website. I am writing an application that
displays about 4 - 6 images, a few of which may be annoyingly large.
Generating thumbnails is not an option for this application. I could
get into the specifics of why it is not, but its a long and boring
story.

I am a huge fan of using ImageMagick or some other application to
generate thumbails when possible but such is not the case with this
project. I am just looking for options with my specific case. I dont
care so much if the images are distorted, they just need to be
recognizable. Thanks for everyones input.

[Stan Brown]

In article <c5**************************@posting.google.com > in
comp.infosystems.www.authoring.html, J. VerSchave
<ca*********@yahoo.com> wrote:

I am writing an application that
displays about 4 - 6 images, a few of which may be annoyingly large.
Generating thumbnails is not an option for this application.

If the images are "annoyingly large", then you're right that
generating thumbnails is not an option. It's a requirement.

Very few users will sit and wait while big images download. Most
will simply click elsewhere. The exception is when you have used a
proper thumbnail and disclosed the size of the big picture that the
thumbnail links to, so that users have some idea of whether it will
be worth the wait.

--
Stan Brown, Oak Road Systems, Cortland County, New York, USA
http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator: http://validator.w3.org/
CSS 2 spec: http://www.w3.org/TR/REC-CSS2/
2.1 changes: http://www.w3.org/TR/CSS21/changes.html
validator: http://jigsaw.w3.org/css-validator/

[gmerriment]

I have a bunch of images that are

600x800
800x600
640x480
480x640

I want to use HTML to contrain the size of these images. I basically
want to display them as thumnails. Here is what I am trying to do:

"Display a thumbnail of this image, contraining the largest of the two
dimensions to 100 pixels and set the other dimension to the proper
relative size, scaled appropriately."

I dont want to actually resize the images, I just want them to be
displayed smaller. Is there an easy way to do this with HTML? With
CSS?

There is a PHP script called ImageThumb available here: http://www.olivo.net/software/imagethumb/

It will allow you to do exactly what you're talking about. Certain folks would do well to remember that if it were so important to NEVER resize large images, that HTML wouldn't allow you to do it. I'm sure you're intelligent enough to have weighed the pros and cons of using this sort of method and determined that resizing the images is the best way to do it.

I can think of one situation where dynamic resizing of images would be necessary. A gallery of images that can be generated on the fly by users, using an XML code back, wouldn't be able to have thumbnails made for every image a user might upload. Not unless you want to pay some graphic designer ridiculous amounts of money to do it 24/7. Time or budget constraints may prevent this project from incorporating something as complicated as Google's image search.