By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,447 Members | 1,172 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,447 IT Pros & Developers. It's quick & easy.

Image scaling

P: n/a

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
Jul 20 '05 #1
Share this Question
Share on Google+
11 Replies


P: n/a
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/
Jul 20 '05 #2

P: n/a
Stephane D'Alu <sd***@sdalu.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/
Jul 20 '05 #3

P: n/a
In message <sl*******************@rork.sdalu.com>, Stephane D'Alu
<sd***@sdalu.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
Jul 20 '05 #4

P: n/a
On 2003-10-19, Jukka K. Korpela <jk******@cs.tut.fi> wrote:
Stephane D'Alu <sd***@sdalu.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
Jul 20 '05 #5

P: n/a
Stephane D'Alu <sd***@sdalu.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/
Jul 20 '05 #6

P: n/a
In message <Xn*****************************@193.229.0.31>, Jukka K.
Korpela <jk******@cs.tut.fi> writes
Stephane D'Alu <sd***@sdalu.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
Jul 20 '05 #7

P: n/a
*Stephane D'Alu* <sd***@sdalu.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...
Jul 20 '05 #8

P: n/a
jake <ja**@gododdin.demon.co.uk> wrote in
news:Kt**************@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*.
Jul 20 '05 #9

P: n/a
On 20 Oct 2003 03:05:38 GMT, Eric Bohlman <eb******@earthlink.net>
wrote:
jake <ja**@gododdin.demon.co.uk> wrote in
news:Kt**************@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/
Jul 20 '05 #10

P: n/a
In message <Xn*******************************@130.133.1.4>, Eric Bohlman
<eb******@earthlink.net> writes
jake <ja**@gododdin.demon.co.uk> wrote in
news:Kt**************@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."


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


Sure. It's a case of testing the results first before you publish them
for the world to look/laugh at ;-)

regards

--
Jake
Jul 20 '05 #11

P: n/a
Eric Bohlman wrote:
jake <ja**@gododdin.demon.co.uk> wrote in
news:Kt**************@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*.


I agree with all of the above, for the current image standards such as JPEG,
GIF, PNG. (SVG is obviously intended to scale, but isn't properly supported
yet and doesn't really cover what is being talked about here).

I think it will change with JPEG2000. I've just been discussing elsewhere some
possibilities. I hope I have understood enough about it:

http://groups.google.com/gr*****************************@newsfep1-gui.server.ntli.net

<extract>
A key is the progressive nature of the serialisation of the compressed image.
The first part of the data stream has a low quality/resolution version of the
image, then later parts of the stream progressively add detail. (I haven't got
as far as finding out whether the first version has low colour as well as low
detail, but I think that is a possibility).

Suppose a photographer puts (say) a 2000 x 1000 JPEG2000 on the web site. A
user viewing that full size on a fast enough network will take the whole lot,
and first see a low resolution version that gradually improves. On a lower
speed network, a user may choose to stop the stream part way through, and make
do with the lower resolution image. Or ....

As far as I can tell, another intention is that the UA can display the image
over a smaller area of the screen (as the width & height in the "img" can say
at the moment). So if the UA shows that above picture at 1000 x 500, it will
only need to take part of the stream in order to achieve high resolution at
the small size. In other words, downward-scalability combined with bandwidth
optimisation. Thumbnails would simply be images formed from just the first
part of the data stream and displayed on a small area of the screen. They
would not be separate things on the server, nor would they need any different
protocol or even parameters - except ceasing the stream earlier.
</extract>

Apart from the fact that we are some way away from having widespread support
for JPEG2000, there is the problem identified by this thread. How will this
extra flexibility be influenced by CSSs? We must surely want these effects to
be handled by CSS without needing constructs that only work for JPEG2000. So
the CSS, the mark-up, the JPEG2000, the UA, etc, all need to cooperate to make
the image fit naturally into place, according to page-design intentions and
user's accessibility / scalability / performance requirements.

I can't put those together in my mind to see which way these will go with
JPEG2000.

--
Barry Pearson
http://www.Barry.Pearson.name/photography/
http://www.BirdsAndAnimals.info/
http://www.ChildSupportAnalysis.co.uk/
Jul 20 '05 #12

This discussion thread is closed

Replies have been disabled for this discussion.