How to resize <IMG> width absolute and height relative ?

**Markus Ernst** · Jul 20 '05, 06:38 PM

Re: How to resize <IMG> width absolute and height relative ?

"Wladimir Borsov" <wladimirb@gmx. net> schrieb im Newsbeitrag
news:c75ct8$iqe $06$1@news.t-online.com...[color=blue]
> As well known for <IMG ...> tags in web pages a width and a height[/color]
attribute can be[color=blue]
> applied. What I want to do now is to fix the width for ALL the images on[/color]
my web page[color=blue]
> to exactly lets say 70 pixel regardless how big the originals are.
>
> The height should be adjusted proportional so that the resulting thumbnail[/color]
is not distorted.[color=blue]
> But as far as I know there is no such attribute like
>
> <IMG SRC=...... WIDTH=70 HEIGHT="Adjust proportional to Width"> ....
>
> How can I solve this problem ?
>[/color]

Just don't write a height attribute, then AFAIK user agents should scale the
image proportionally.

But actually if this is applied to several images you should prefer to scale
them at the server side, otherwise you send much too much data to the
client.

HTH
Markus

**Mitja** · Jul 20 '05, 06:38 PM

Re: How to resize <IMG> width absolute and height relative ?

Wladimir Borsov <wladimirb@gmx. net>
(news:c75ct8$iq e$06$1@news.t-online.com) wrote:[color=blue]
> As well known for <IMG ...> tags in web pages a width and a height
> attribute can be applied. What I want to do now is to fix the width
> for ALL the images on my web page
> to exactly lets say 70 pixel regardless how big the originals are.
>
> The height should be adjusted proportional so that the resulting
> thumbnail is not distorted. But as far as I know there is no such
> attribute like
>
> <IMG SRC=...... WIDTH=70 HEIGHT="Adjust proportional to Width"> ....
>
> How can I solve this problem ?[/color]

<img width="70" SRC="..."> :)
[color=blue]
> As a second best solution I could accept if I could write percentage
> values:
>
>
> <IMG SRC=..... WIDTH=50% HEIGHT=50%>
>
> but this doesn't work too.
>
> Wladimir[/color]

**Stan Brown** · Jul 20 '05, 06:38 PM

Re: How to resize <IMG> width absolute and height relative ?

"Wladimir Borsov" <wladimirb@gmx. net> wrote in
comp.infosystem s.www.authoring.html:[color=blue]
>As well known for <IMG ...> tags in web pages a width and a height attribute can be
>applied. What I want to do now is to fix the width for ALL the images on my web page
>to exactly lets say 70 pixel regardless how big the originals are.
>
>The height should be adjusted proportional so that the resulting thumbnail is not distorted.
>But as far as I know there is no such attribute like
>
><IMG SRC=...... WIDTH=70 HEIGHT="Adjust proportional to Width"> ....
>
>How can I solve this problem ?[/color]

In some (most?) browsers, leave off the height and it will be
adjusted proportionally.

But this is a bad thing to do. Why impose the penalty on the user of
downloading a larger picture, then not let her see it? If you want
your pictures to be 70px wide, crop them yourself before uploading.

<img> width and height should always match the actual width and
height of the image.

--
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/

**nice.guy.nige** · Jul 20 '05, 06:38 PM

Re: How to resize <IMG> width absolute and height relative ?

While the city slept, Wladimir Borsov <wladimirb@gmx. net> feverishly typed:
[color=blue]
> As well known for <IMG ...> tags in web pages a width and a height
> attribute can be applied. What I want to do now is to fix the width
> for ALL the images on my web page
> to exactly lets say 70 pixel regardless how big the originals are.
>
> The height should be adjusted proportional so that the resulting
> thumbnail is not distorted. But as far as I know there is no such
> attribute like
>
> <IMG SRC=...... WIDTH=70 HEIGHT="Adjust proportional to Width"> ....[/color]

You can use a server-side solution, such as PHP to do the maths. Off the top
of my head, if you know the original image width and heght (if not, no
problems as you can get them using PHP) something like the following should
work;

<? php

$desiredwidth = 70;
$originalwidth = 100; // replace originalwidth and originalheight with
whatever the image dimensions are...
$originalheight = 200; // ... or find a better way of getting them!

$ratio = $originalwidth / $desiredwidth;
$desiredheight = $originalheight / $ratio;

print("<img src=\"whatever. jpg\" width=\"$desire dwidth\"
height=\"$desir edheight\" alt=\"whatever\ ">\n");
?>

I haven't thoroughly checked this, so the maths may be wrong! But it still
shows a way to do it.

Remember, though, that if an original image is smaller than 70 pixels wide,
then this may result in distortion of the image as it will be stretched.
Remember also that this is a bad way to make thumbnails of large images, as
the full size image file still has to be loaded, regardless of how small you
are making it appear on the screen.

Hope that helps,
Nige

--
Nigel Moss.

Email address is not valid. nigel@nigenetDO G.org.uk. Take the dog out!
http://www.nigenet.org.uk | Boycott E$$O!! http://www.stopesso.com
In the land of the blind, the one-eyed man is very, very busy!

**Sid Ismail** · Jul 20 '05, 06:38 PM

Re: How to resize <IMG> width absolute and height relative ?

On Mon, 3 May 2004 14:11:20 +0200, wladimirb@gmx.n et (Wladimir Borsov)
wrote:

: As well known for <IMG ...> tags in web pages a width and a height attribute can be
: applied. What I want to do now is to fix the width for ALL the images on my web page
: to exactly lets say 70 pixel regardless how big the originals are.
:
: The height should be adjusted proportional so that the resulting thumbnail is not distorted.
: But as far as I know there is no such attribute like
:
: <IMG SRC=...... WIDTH=70 HEIGHT="Adjust proportional to Width"> ....
:
: How can I solve this problem ?

Have only width=70. Remove height altogether. You'll get what you want.

Sid

**mscir** · Jul 20 '05, 06:38 PM

Re: How to resize <IMG> width absolute and height relative ?

Wladimir Borsov wrote:
[color=blue]
> What I want to do now is to fix the width for ALL the images on my web page
> to exactly lets say 70 pixel regardless how big the originals are.[/color]
<snip>

I'm not sure about browser compatibility, this works on my IE6, Netscape
7.1, Firefox 0.8:

function resizepics(w,h) {
var p = document.getEle mentsByTagName( 'img');
for (var i=0; i<p.length; i++){
p[i].style.width=w;
p[i].style.height=h ;
}
}

Mike

**Markus Ernst** · Jul 20 '05, 06:38 PM

Re: How to resize <IMG> width absolute and height relative ?

"nice.guy.n ige" <nigel_moss@dea dspam.com> schrieb im Newsbeitrag
news:c75m9f$ika sc$1@ID-112325.news.uni-berlin.de...[color=blue]
> While the city slept, Wladimir Borsov <wladimirb@gmx. net> feverishly[/color]
typed:[color=blue]
>[color=green]
> > As well known for <IMG ...> tags in web pages a width and a height
> > attribute can be applied. What I want to do now is to fix the width
> > for ALL the images on my web page
> > to exactly lets say 70 pixel regardless how big the originals are.
> >
> > The height should be adjusted proportional so that the resulting
> > thumbnail is not distorted. But as far as I know there is no such
> > attribute like
> >
> > <IMG SRC=...... WIDTH=70 HEIGHT="Adjust proportional to Width"> ....[/color]
>
> You can use a server-side solution, such as PHP to do the maths. Off the[/color]
top[color=blue]
> of my head, if you know the original image width and heght (if not, no
> problems as you can get them using PHP) something like the following[/color]
should[color=blue]
> work;
>
> <? php
>
> $desiredwidth = 70;
> $originalwidth = 100; // replace originalwidth and originalheight with
> whatever the image dimensions are...
> $originalheight = 200; // ... or find a better way of getting them!
>
> $ratio = $originalwidth / $desiredwidth;
> $desiredheight = $originalheight / $ratio;
>
> print("<img src=\"whatever. jpg\" width=\"$desire dwidth\"
> height=\"$desir edheight\" alt=\"whatever\ ">\n");
> ?>
>
> I haven't thoroughly checked this, so the maths may be wrong! But it still
> shows a way to do it.
>
> Remember, though, that if an original image is smaller than 70 pixels[/color]
wide,[color=blue]
> then this may result in distortion of the image as it will be stretched.
> Remember also that this is a bad way to make thumbnails of large images,[/color]
as[color=blue]
> the full size image file still has to be loaded, regardless of how small[/color]
you[color=blue]
> are making it appear on the screen.[/color]

If you suggest the serverside solution I would suggest to use PHP to
actually resize the image file, not just the HTML code...

--
Markus

**Harlan Messinger** · Jul 20 '05, 06:39 PM

Re: How to resize <IMG> width absolute and height relative ?

"mscir" <mscir@access4l ess.com.net.org .uk> wrote in message
news:109e1urn90 o0u25@corp.supe rnews.com...[color=blue]
> Wladimir Borsov wrote:
>[color=green]
> > What I want to do now is to fix the width for ALL the images on my web[/color][/color]
page[color=blue][color=green]
> > to exactly lets say 70 pixel regardless how big the originals are.[/color]
> <snip>
>
> I'm not sure about browser compatibility, this works on my IE6, Netscape
> 7.1, Firefox 0.8:[/color]

.... when Javascript is enabled.
[color=blue]
>
> function resizepics(w,h) {
> var p = document.getEle mentsByTagName( 'img');
> for (var i=0; i<p.length; i++){
> p[i].style.width=w;
> p[i].style.height=h ;
> }
> }
>
> Mike
>[/color]

**JotM** · Jul 20 '05, 06:39 PM

Re: How to resize <IMG> width absolute and height relative ?

Wladimir Borsov wrote:[color=blue]
> As well known for <IMG ...> tags in web pages a width and a height attribute can be
> applied. What I want to do now is to fix the width for ALL the images on my web page
> to exactly lets say 70 pixel regardless how big the originals are.[/color]

Resize the images with a editing app. Client-side resizing will not
exactly enhance the quality of the image. (to put it mildly) Especially
images with repeating structures are prone to moire effects if you do.

--

/*************** *************** *************** *************** *************** *
JotM aka Jaap van der Heide
Remove ".XXXnospam XXX" for a valid return address
Please reply to a news message in the group where the message was posted
*************** *************** *************** *************** *************** */

How to resize <IMG> width absolute and height relative ?

How to resize <IMG> width absolute and height relative ?

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment