Image size with percentage.

  • Ifrit
  • Graduate
  • Graduate
  • User avatar
  • Posts: 196
  • Loc: Portugal

Post 3+ Months Ago

Hi guys, been long since i've been here, i'm building a site for a company and i need to do the following:

Display pictures that are resized using percentage values:
Code: [ Select ]
width="80%" & height="80%"


Problem is: pictures will _not_ display in IE browsers >.< but they do show up if you use Mozilla or Firefox browsers... is there a work around that i can use for the pics to display on IE?

Here's a link to the webpage in specific:

http://www.mulembeira.pt/Search_results.asp?catID=23555
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Posts: 23456
  • Loc: Woodbridge VA

Post 3+ Months Ago

It has to do with how IE handles the width and height percentages when nested in tables. They just plain don't display the image. You can see this clearly in these to examples:

EXAMPLE 1
In this example there are two basketball images. The first image uses fixed pixels, and the second is nested in an internal table and uses percentages. You'll note that both images display in Firefox, but only the one with pixels displays in IE.

http://www.boastingrights.com/ozzu/imgtest.html

EXAMPLE 2
In this example, I've removed the "external" table. Now if you look in IE I can use percentages all day long if it's not in a table, but the one that I left in a table doesn't display. Again both images display in Firefox.

http://www.boastingrights.com/ozzu/imgtest2.html


If it's essential for you to use tables then you are going to have to use pixels for your dimensions. Truthfully using perentages for image dimensions isn't good practice anyway because it distorts your images and detracts from the appearance of the page.

Solutions:
1. Keep the tables and use pixels
2. Keep the tables and actually resize the images to the dimensions you need and use pixels
3. Try rewriting using divs and css to display your page (would mean a total rewrite, but would be your best practice.
  • Ifrit
  • Graduate
  • Graduate
  • User avatar
  • Posts: 196
  • Loc: Portugal

Post 3+ Months Ago

The problem i have that forces me to use percentages to resize the pictures, is that each product that's for sale on the site can only contain 1 image file.. but i need to display the original size for detail view and a smaller version for the product navigation layout to display properly, i dont use plain pixel resizing because in many cases it would distort my pictures in ridiculous ways making the client squint his eyes of disgust :?

I can try a solution without using tables.. for example pulling an external file into my layout with the include tag containing my picture.. would that work, or perhaps an iframe? I cant quite test it until next monday, so ill have to speculate alot here..

From the solutions you pointed..
1: I can only edit a template that will be used for every picture in the site.. see my dilemma?

2: Will probably be my temporary measure.. which will force me to edit all my pictures to fit a specific resized number of pixels.. thats gonna be a challenge.. i got examples that have 100x500 pix and vice versa..

3: Eh... the site is all about tables >:| im not really good at creating css placeables X.x my client wants the site functional asap...

When i can im totally gonna try out including an external file without any tables.

Any further insight will be much appreciated~
  • darkermoon
  • Expert
  • Expert
  • User avatar
  • Posts: 542
  • Loc: Riverdale, MD

Post 3+ Months Ago

resizing by pixels is the same as percent, just do the calculations on the original size and come up with what the percent would be. You are way better off using seperate images though
  • Ifrit
  • Graduate
  • Graduate
  • User avatar
  • Posts: 196
  • Loc: Portugal

Post 3+ Months Ago

what if i have a picture thats 100x600 and one thats 300x50? how would i use plain pixels to display them both properly?

i cant upload more than 1 pic per product, if i could i would.
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Posts: 23456
  • Loc: Woodbridge VA

Post 3+ Months Ago

Check the first script on this page. It may be what you need:
http://www.hotscripts.com/ASP/Scripts_a ... e_Display/
  • Ifrit
  • Graduate
  • Graduate
  • User avatar
  • Posts: 196
  • Loc: Portugal

Post 3+ Months Ago

i doubt it will solve my problem... ill try it, if it doesnt, ill start testing with external files

edit/update:

Well doh, i tried iframes, divs, including external files etc etc.. nothing worked, basically because of my asp base code, some things wont work, but enough of this.

My solution was to phone my client and tell him ill have to make some changes and thus it happened, im authorized to create a thumbnails folder and respective thumbs, and thats the easiest solution i told him. All is solved, now to get my well deserved payment. :wink:

If you were wondering: Why the hell didnt you just do that in the first place?
Answer would be: My client wants to manage the site, so i made him an easy to manage control panel which would be easy for him to add new products and respective pictures, it would become messy and confusing for him if he had to upload resized pictures along with the original ones, especially because he understands zit of these things. In the end i saw myself forced to explain him how to do it anyways... he'll have to deal with it (yes, explaining to someone who doesnt know how these things function that you need 2 pictures to do what he wants, is hard work, or at least it was...).

Ill eventually create a means for him to do everything in one go, with imagemagik or something.. well blah, its done, im out, thanks.

Post Information

  • Total Posts in this topic: 7 posts
  • Users browsing this forum: No registered users and 41 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.