Win a copy of Testing JavaScript Applications this week in the HTML Pages with CSS and JavaScript forum!
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Bear Bibeault
  • Ron McLeod
  • Jeanne Boyarsky
  • Paul Clapham
Sheriffs:
  • Tim Cooke
  • Liutauras Vilda
  • Junilu Lacar
Saloon Keepers:
  • Tim Moores
  • Stephan van Hulst
  • Tim Holloway
  • fred rosenberger
  • salvin francis
Bartenders:
  • Piet Souris
  • Frits Walraven
  • Carey Brown

JS/CSS to limit maximum image size

 
Sheriff
Posts: 6920
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I'm currently working on a web application which (among other things) allows the user to browse a catalogue of products. Each product has an associated image, which should be shown next to the description on the screen. Images and product text are supplied by a third party.

All this is fine and dandy, until the supplied image is too large for the space allocated on the web page, when it completely screws up the text flow and pushes important information into invisibility. I have experimented with setting the height and width explicitly on the image tag, but this stretches small images and makes them look horrible.

I have little or no possibility of changing the appearance, box sizes, text flow or other on-screen stuff (it's all produced by the customer's high-power, high-price web designers), but I can add extra "invisible" JS/CSS behaviour if necessary.

What I would ideally like, is a way of showing an image at its "natural" resolution if both dimensions are smaller than a set limit, but downsizing the image to fit if it is too big. IE support is vital, Firefox important, other browsers nice to have.

Does anyone have any hints as to how I might achieve this? Is it even possible?

Many thanks in advance for any suggestions.
 
Ranch Hand
Posts: 93
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Hi,
I have used couple of image resizing stuff, in some applications.For you i have come up with, a small piece of code:

javascript function:
function changeimage(){
var obj = document.getElementById("showimage");
var obj2 = document.getElementById("thecolumn");
var store2= obj2.width;
var store = obj.width;
while(store > store2){
obj.width = obj.width * (0.7476);
obj.height = obj.height * (.7476);

store=obj.width;
}
}
------------------------
I have used this javascript function on body onload() of user page; "showimage" is the image-element id & "thecolumn" is the TD/Frame id which captures this image element.

Basic idea is, if you Frame/TD has got fixed width, then you have to resize the image, without loosing much clarity. The ratio (0.7476:1) is alright for that.here my TD width is 200px, while image res. is 800x600. I hope it will help you.

[ March 06, 2007: Message edited by: Subhadip Chatterjee ]
[ March 06, 2007: Message edited by: Subhadip Chatterjee ]
 
author
Posts: 15385
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
There is max-width and max-height [max-width: 500px;] (thinking Mozilla only, not sure about IE7), but that is not going to keep the aspect ratio.

You would have to use JavaScript to resize it. and I would not do what was done above.



Eric
[ March 06, 2007: Message edited by: Eric Pascarello ]
 
author
Posts: 11962
5
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I'd probably resize the image file on the server-side when the image is uploaded. That way you wouldn't be eating up bandwidth with unnecessary payload in the form of too large images.
 
Eric Pascarello
author
Posts: 15385
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I probably would format them on my server too, but if you really want to go a JavaScript soultion, check out this: http://www.pascarello.com/examples/preloadImages.html

Eric
 
Frank Carver
Sheriff
Posts: 6920
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Lasse wrote: I'd probably resize the image file on the server-side when the image is uploaded.

Me too. That bug is in the queue for a different piece of software, though. One with a slower rate of change than the bit I'm working on. I need images to be right for a demo at the end of the week

Eric: Thanks for that. I'll give it a try and see how I get on.
 
Is that a spider in your hair? Here, threaten it with this tiny ad:
Thread Boost feature
https://coderanch.com/t/674455/Thread-Boost-feature
    Bookmark Topic Watch Topic
  • New Topic