limit the size of an image 1

[stranger123]

Hi,

<img src="

http://www.....gif">

How to limit the width and height of the image? I don't mind to cut it or put it in a box with scroll bars, but I don't want to use <img src="

http://www.....gif"

width="...">

Any suggestion?

 

[Vragabond]

Since css cropping (

http://www.w3.org/TR/css3-content/#replacedContent)

is not widely supported yet in the modern browsers, the only thing you could do is put it in a div that has a limited width and height and put [tt]overflow: auto;[/tt] on the div to make it scroll (or overflow: hidden; if you want to just cut it).

 

[ChrisHunt]

What do you mean by "limit the width and height"? You have an image. It is a particular height and width. What do you want to do with it?

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[stranger123]

Vragabond,
Thank you. I am going to have a try.

ChrisHunt,
The image URLs will be posted by users and I need to limit the size.

 

[stranger123]

Vragabond,

I have just tested and that works, thank you.

Here is the only problem, say
<div style="width:300px; height:200px; overflow:auto;">
when the image height is 100px, how to let the div change to 100px automatically?

 

[Foamcow]

Or, if you have access to a server side language you could use that to resize the image to the size you want.
It's quite easy with PHP.

Using that method you are actually creating an image that is the correct size, rather than squashing a large one down.
If you take an 800 x 800px image and put it on your page sized to 100 x 100px , it's STILL and 800 x 800 image and has the same filesize.

Alternatively, if you actually resample the image as I described above, then you are putting a 100 x 100 image on your size, with a correspondingly smaller filesize.

<honk>*:O)</honk>
Foamcow Heavy Industries - Web site design in Cheltenham and Gloucester
Ham and Jam - British & Commonwealth forces mod for Half Life 2

 

[stranger123]

Foamcow,

Thank you for your imformation.
In my case, the image is only a url, it from the external site.

 

[stranger123]

Vragabond,

Actualy, your suggestion is fine. Thanks a lot.

 

[ChrisHirst]

if the image is simply a url from another site there is no way you are going to be able to find the physical dimensions of the image.
So using width & height in HTML or CSS are your only options.


Chris.

Indifference will be the downfall of mankind, but who cares?
Woo Hoo! the cobblers kids get new shoes.
People Counting Systems

So long, and thanks for all the fish.

 

[BillyRayPreachersSon]

If the image is simply a url from another site there is no way you are going to be able to find the physical dimensions of the image.

You can - using my handy FAQ, "Detecting the dimensions of an image client-side": faq216-5781

While it's not a substitute for doing this server-side, it will still give a the image dimensions client-side for 95% of users.

Hope this helps,
Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[stranger123]

That is an interesting code. I will have a try. Thank you for your work.

 

[Foamcow]

Likewise, there is a PHP function, getimagesize(); that will return an array with lots of useful info about an image.

<honk>*:O)</honk>
Foamcow Heavy Industries - Web site design in Cheltenham and Gloucester
Ham and Jam - British & Commonwealth forces mod for Half Life 2