| T O P I C R E V I E W |
| Etymon |
Posted - 04 October 2008 : 00:40:30
I don't know how to word this enough to do a search on it on the net. Maybe someone can help me with the technical terms.
What I want to do is resize an image when the browser window is manually resized. What I mean though is this ... say I have an image with declared width and height values. How do I resize the image when the browser is resized? By resized I don't particularly mean through the control panel in the display properties for the monitor like this setting or that setting. I mean using the image that is in between the _ X group in the upper right of the browser window. For example, if I had an image on a page that was 800 pixels wide that was also fixed by being specified as <img src="" width="800">, and this was in a display that was 800x600 ... if someone manually dragged the width of the screen to be smaller, how do I scale the image to fit. I'm looking for keywords on how to search for this kind of effect. If the answer is a no-brainer, just please have pitty on me today. LOL! Thanks  < |
| 10 L A T E S T R E P L I E S (Newest First) |
| Carefree |
Posted - 07 October 2008 : 23:06:21
quote:
320x160 which is a 2:1 ratio if you change that to 32% x 16% you get an image which is 102.4x25.6 which is a 4:1 ratio
32% of a value is twice as much as 16% of the same value. The percentages refer to the page size, not the image size. If a page size is 600x800, and the image size is 300x400, then setting the image size to 50% on both values will always result in the image resizing with the page.
Try this page to see what I mean. Since the dimension of the photo is roughly equivalent, I set both values to 40% of the page.
Edit: I was just playing with that page. If you resize the width (either with/without a height adjustment), the height is also resized. If you resize only the height, the photo doesn't change. I'll look and see if I forgot a setting.< |
| HuwR |
Posted - 07 October 2008 : 17:54:40
quote:
Originally posted by Carefree
quote:
Originally posted by HuwR
if you only set either the width or height of an image then resizing will allways maintain the correct aspect.
using a percentage width with a fixed height is really not a good idea at all as your image will always be distorted no matter what you do.
That's why I didn't mention setting a fixed height. You can insert a photo and set both characteristics to a percentage of the page. For example, if a photo is 320 pixels by 160 pixels, you could set it to 32 percent by 16 percent. Now, regardless of which direction you reduce or enlarge the page, the photo will not be distorted.
well, actually I didn't say you did, I was answerring Etymon who did say using a fixed height 
also your logic is flawed, setting the images size to a percentage will only maintain the aspect ratio if bothe percentages are the same, setting them to different percentages will not maintain the aspect ratio at all, just do the maths.
your example = 320x160 which is a 2:1 ratio if you change that to 32% x 16% you get an image which is 102.4x25.6 which is a 4:1 ratio
< |
| Etymon |
Posted - 07 October 2008 : 17:25:56
Well, now that helps too Bruno ... CareFree! Thanks guys!< |
| Carefree |
Posted - 07 October 2008 : 16:14:27
quote:
Originally posted by HuwR
if you only set either the width or height of an image then resizing will allways maintain the correct aspect.
using a percentage width with a fixed height is really not a good idea at all as your image will always be distorted no matter what you do.
That's why I didn't mention setting a fixed height. You can insert a photo and set both characteristics to a percentage of the page. For example, if a photo is 320 pixels by 160 pixels, you could set it to 32 percent by 16 percent. Now, regardless of which direction you reduce or enlarge the page, the photo will not be distorted.< |
| balexandre |
Posted - 07 October 2008 : 15:57:45
there are a lot of examples in the web about it, just follow one:
http://dotnetslackers.com/articles/aspnet/Generating-Image-Thumbnails-in-ASP-NET.aspx
http://microsoft.apress.com/asptodayarchive/73959/dynamically-creating-thumbnails-using-a-configurable-http-handler-class-and-a-custom-aspnet-web-control
http://www.codeproject.com/KB/web-image/thumbnailer.aspx
if you need help, you know the drill... mail me < |
| Etymon |
Posted - 07 October 2008 : 14:35:38
Ack! I'm not a .NET man at all as of yet! *grumbles & complains* *pout* *goes back to the shop to Tommy-rig something else* *grumbles & complains some more* *grin*< |
| HuwR |
Posted - 07 October 2008 : 14:21:15
if you only set either the width or height of an image then resizing will allways maintain the correct aspect.
using a percentage width with a fixed height is really not a good idea at all as your image will always be distorted no matter what you do.
to resize images on the fly you would need to write a .net image handler which can cope with the resizing and or cropping properly. html is not meant as an image manipulator :)< |
| Etymon |
Posted - 07 October 2008 : 14:11:07
Yep!  That is pretty technical! LOL!
Well, after thinking about a bit more ... what I am really after is perhaps a compromise. Is there a way to replace an image with another image when the viewer resizes the window. Say if the width is within a certain range, then use a pre-cropped image suited for a specific width? If I use the percentage, in this case (with a fixed height), then the image will most likely distort if the width dimension is adjusted too greatly. I suppose this is some kind of javascript problem.< |
| balexandre |
Posted - 04 October 2008 : 03:02:19
can't get more technical than that < |
| Carefree |
Posted - 04 October 2008 : 01:58:47
The default settings for Internet Explorer 6 -> 8 have this option called "automatic image resizing". Bet you can't guess what it's for.... Go to Tools, Internet Options, Advanced, Multimedia - you'll see it.
Within the registry, the location is: HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\Main
Create a "REG_SZ" field on the right, title it "
Enable AutoImageResize”, then give it the value of “Yes”. This will work on all versions of IE 5-8.
For those who have the image resizing turned off, the simplest method would be to embed the image in a table's cell, then set the image to a percentage value rather than specified height/width.< |
