Image scaling

Do you know if it is possible to have an image to be scalled
to a maximum width/height, but with keeping its aspect ratio.

The two ideas I had were:
- <img src="toto.jpg" style="max-width: 200px; max-height: 200px;"/>
but it doesn't keep the ratio

- <div style="width: 200px; height: 200px;"><img src="toto.jpg/></div>
but the image flow outside the div


Sincerly,

--
Stephane D'Alu

Stephane D'Alu wrote:

Do you know if it is possible to have an image to be scalled
to a maximum width/height, but with keeping its aspect ratio.

No

--
David Dorward http://dorward.me.uk/

Stephane D'Alu <sdalu (AT) sdalu (DOT) com> wrote:

Do you know if it is possible to have an image to be scalled
to a maximum width/height, but with keeping its aspect ratio.

Maximum with respect to what? You can set width: 100%, and by leaving
height unset, you're asking browsers to maintain the proportions.

But browsers generally do an awful job in scaling images. Anything but
a very simple ornament probably gets distorted.

--
Yucca, http://www.cs.tut.fi/~jkorpela/

In message <slrnbp538f.1895.sdalu (AT) rork (DOT) sdalu.com>, Stephane D'Alu
<sdalu (AT) sdalu (DOT) com> writes

Do you know if it is possible to have an image to be scalled
to a maximum width/height, but with keeping its aspect ratio.

The two ideas I had were:
- <img src="toto.jpg" style="max-width: 200px; max-height: 200px;"/
but it doesn't keep the ratio

- <div style="width: 200px; height: 200px;"><img src="toto.jpg/></div
but the image flow outside the div


Sincerly,

img src="toto.jpg" width="100%"

--
Jake

On 2003-10-19, Jukka K. Korpela <jkorpela (AT) cs (DOT) tut.fi> wrote:

Stephane D'Alu <sdalu (AT) sdalu (DOT) com> wrote:

Do you know if it is possible to have an image to be scalled
to a maximum width/height, but with keeping its aspect ratio.

Maximum with respect to what? You can set width: 100%, and by leaving
height unset, you're asking browsers to maintain the proportions.

I want to be able to specify the maximum width AND height of a block
and have the image fitting in it but keeping its aspect ratio (in fact
an easy way to create a thumbnail gallery in a browser).

And of course the size is specified in px, em or ex, but not a percentage.

Sincerly

--
Stephane D'Alu

Stephane D'Alu <sdalu (AT) sdalu (DOT) com> wrote:

I want to be able to specify the maximum width AND height of a
block and have the image fitting in it but keeping its aspect ratio

Did you consider the practical problems of scaling that I mentioned,
before you started wanting that?

Anyway, you can do that only by first computing the width or height.
That is, CSS won't do that for you.

(in fact an easy way to create a thumbnail gallery in a browser).

Why didn't you say that? Just don't scale them. Use a good thumbnailing
program to generate the thumbnails for you, in fixed size.

And of course the size is specified in px, em or ex, but not a
percentage.

Well, I don't see how that relates. You can set width:100% even when
the enclosing block has size specified that way.

--
Yucca, http://www.cs.tut.fi/~jkorpela/

In message <Xns9419C3B191624jkorpelacstutfi (AT) 193 (DOT) 229.0.31>, Jukka K.
Korpela <jkorpela (AT) cs (DOT) tut.fi> writes

Stephane D'Alu <sdalu (AT) sdalu (DOT) com> wrote:

Do you know if it is possible to have an image to be scalled
to a maximum width/height, but with keeping its aspect ratio.

Maximum with respect to what? You can set width: 100%, and by leaving
height unset, you're asking browsers to maintain the proportions.

But browsers generally do an awful job in scaling images. Anything but
a very simple ornament probably gets distorted.

Actually, I find that most browsers (IE/Mozilla/Netscape/Opera) do quite

a good job of re-scaling the image downwards (i.e. automatic 'down
sampling'). The secret seems to be to produce the image big enough so
that, for most common browser size settings, the browser is *always*
re-sampling downwards.

The larger size of the image means that the compression need to be
higher, and so the image is probably not quite as good as a fixed-sized
one -- but it's really not too bad at all for all practical purposes.

It works well with flexible pages, so that as the screen shrinks, the
image shrinks to maintain the same proportion (which may or may not be a
good thing, depending upon what your aiming for).

regards.
--
Jake

*Stephane D'Alu* <sdalu (AT) sdalu (DOT) com>:

Do you know if it is possible to have an image to be scalled
to a maximum width/height, but with keeping its aspect ratio.

Sure, most likely in your image manipulation program or with certain
scripting/programming languages, but not in pure CSS or HTML.

--
A bus station is where a bus stops,
a train station is where a train stops,
on my desk I have a work station...

jake <jake (AT) gododdin (DOT) demon.co.uk> wrote in
news:KtbknkYR4xk$Ew3+@gododdin.demon.co.uk:

Actually, I find that most browsers (IE/Mozilla/Netscape/Opera) do quite
a good job of re-scaling the image downwards (i.e. automatic 'down
sampling'). The secret seems to be to produce the image big enough so
that, for most common browser size settings, the browser is *always*
re-sampling downwards.

The larger size of the image means that the compression need to be
higher, and so the image is probably not quite as good as a fixed-sized
one -- but it's really not too bad at all for all practical purposes.

It works well with flexible pages, so that as the screen shrinks, the
image shrinks to maintain the same proportion (which may or may not be a
good thing, depending upon what your aiming for).

It should not, however, be used to create thumbnails. The distortion then
is usually severe, download time is *badly* affected, and browsers (it's
happened to me with both MSIE and Opera in various versions) tend to scroll
slowly or jerkily, or even crash, when viewing pages with lots of
"dumbnails."

I guess the point is that browsers should not be relied upon to resize
images *drastically*.

On 20 Oct 2003 03:05:38 GMT, Eric Bohlman <ebohlman (AT) earthlink (DOT) net>
wrote:

jake <jake (AT) gododdin (DOT) demon.co.uk> wrote in
news:KtbknkYR4xk$Ew3+@gododdin.demon.co.uk:

Actually, I find that most browsers (IE/Mozilla/Netscape/Opera) do quite
a good job of re-scaling the image downwards (i.e. automatic 'down
sampling').

Perhaps usually true, but I have met some cases where browser shrinking
also produced pretty mediocre results.

It should not, however, be used to create thumbnails.

Absolutely not. It destroys the point of having thumbnails in the first
place.

And if you want really good thumbnails, you probably don't want to take
the whole image anyway, but rather select a squarish portion containing
the main feature(s) of the image.

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/