473,387 Members | 1,464 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,387 software developers and data experts.

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
Jul 20 '05 #1
11 16451
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
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
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
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
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
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
*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
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
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
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
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

1
by: Phil Powell | last post by:
$mogResponse = exec("mogrify -size ${width}x$height " . $this->locationPath . '/' . $this->fileName . ' -resize ' . $width . "x$height > +profile " . $this->thumbLocationPath . '/' ....
4
by: D. Alvarado | last post by:
Hello, Can anyone recommend a good image scaling program for PHP 4. What I'm really looking for is just a function that takes an image file and a width to which to scale the image and outputs the...
16
by: Harry Putnam | last post by:
I keep stumbling around with varius alignment tags, even using STYLE tag with absolute positioning but not getting a simple job done. I have an arrangment like this: ...
3
by: Larry Serflaten | last post by:
I am taking a 256 color bitmap from a file and scaling it up X 16 to a 32bppPARGB bitmap in memory. I copy that image to the screen. After scaling, the edges of all the lines and colors are...
3
by: =?Utf-8?B?SlIx?= | last post by:
I would like to add text to an image. I have tried to use DrawString and it works on some images but on others it is very very small. I am pretty sure it has something to do with the size of the...
3
by: Yofnik | last post by:
Hello all, I need your help. Internet Explorer 6+ has a registry setting (UseHR) that will automatically scale images for displays with high resolution (DPI). I am building a web based...
6
by: Stephan Bourdon | last post by:
Hi, Your opinion please on the following subject: Is it acceptable to set the width and height of an image in ems or percents in CSS? The advantage for me is that images will scale up or down...
2
by: Amir Michail | last post by:
Hi, The following gradient method involves scaling a gradient image. How would one put a logo on top of such a scaled gradient image without also scaling the logo image? ...
4
by: Peter May | last post by:
Hi. I know the dimensions area visible on the screen and I would like to picture that there put dynamically, match its size to the window, while retaining the proportions of course. For...
0
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
0
by: aa123db | last post by:
Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...
0
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.