Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

picture Control

Status
Not open for further replies.
spudmizer

spudmizer

Technical User
Jul 25, 2002
35
US
What is the tag that will allow control over a picture size

I have a website that is pulling an image from another website

<img src=&quot;
At the site where I get the picture it says its a 231x231 byte picture and look right, however when it pull it up on my site it turns into a 231,000 x 231,000 and is HUGE !!!!

Since I know the size it is suppose to be is the anything you can do with the img tag
 
Sort by date Sort by votes
Use the following to control the image size.

<img src=&quot; width=&quot;231&quot; height=&quot;231&quot;>

One comment though, you say you are pulling the image from another site. If this site is not yours or you dont have permission to link directly to the image from the website owner this constitutes bandwidth theft. You should really copy the image and place it on you own webserver.

Regards
Ian

Infinity exists! - I just haven't worked out a way to get there yet.

| |
 
Upvote 0 Downvote
Even if you do have permission to display it in this way, you'd be better to make a local copy, shrink it down to the size you want using your favourite graphics tool and then place the reduced version on your own server.

Resizing using HEIGHT and WIDTH attributes will mean the browser has to download all 50 billion pixels (do the maths!) of the image before resizing it locally - assuming anyone stays on your site long enough to see it.

What's the address of this mega-picture anyway? -- Chris Hunt
Extra Connections Ltd
 
Upvote 0 Downvote
hey spudmizer,

If you want to be able to change the picture's height and width attributes on-the-fly, then this sample script might be useful. It uses the soapbox ([soapbox]) animated gif, so if you want to play, then you should save this code as &quot;Sample.html&quot; and right-click on the soapbox gif and save both in the same directory.

Code: 
<!DOCTYPE html 
     PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot;
     &quot;[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;>[/URL]

<html xmlns=&quot;[URL unfurl="true"]http://www.w3.org/1999/xhtml&quot;[/URL] xml:lang=&quot;en&quot; lang=&quot;en&quot;>
  <head>
    <meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=iso-8859-1&quot;></meta>
    <title>JavaScript Sample</title>
  </head>
  <body>
    <form name=&quot;MainForm&quot;>
      <table border=&quot;1&quot;>
        <tr>
          <td><input type=&quot;button&quot; value=&quot;taller&quot; onclick=&quot;document.Grafix01.height += 3;&quot;></input></td>
          <td colspan=&quot;2&quot; rowspan=&quot;2&quot;><img src=&quot;soapbox.gif&quot; height=&quot;58&quot; width=&quot;43&quot; alt=&quot;Soap Box&quot; name=&quot;Grafix01&quot; id=&quot;Grafix01&quot;></img></td>
        </tr>
        <tr>
          <td><input type=&quot;button&quot; value=&quot;shorter&quot; onclick=&quot;document.Grafix01.height -= 3;&quot;></input></td>
        </tr>
        <tr>
          <td><input type=&quot;button&quot; value=&quot;Normalize&quot; onclick=&quot;document.Grafix01.height = 58;document.Grafix01.width = 43;&quot;></input></td>
          <td><input type=&quot;button&quot; value=&quot;Skinnier&quot; onclick=&quot;document.Grafix01.width -= 3;&quot;></input></td>
          <td><input type=&quot;button&quot; value=&quot;Wider&quot; onclick=&quot;document.Grafix01.width += 3;&quot;></input></td>
        </tr>
      </table>
      <p>Resize the image dynamically using the buttons</p>
    </form>
  </body>
</html>

Hope that helps!

Cheers,
[monkey] Edward [monkey]

&quot;Cut a hole in the door. Hang a flap. Criminy, why didn't I think of this earlier?!&quot; -- inventor of the cat door
 
Upvote 0 Downvote
As Chris Hunt said, Make a copy of the picture and then using a photo editor, make it the size you want. That way you know what size it's going to be and you don't have a huge picture being resized when the browser reads that particular line. Another problem that happens sometimes with using width and height attributes to make a picture the right size is that is stretches it and makes it look a bit wrong.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Megabyte512
  • Locked
  • Question
Canvas Profile Picture Edit
Replies
1
Views
108
ChrisHirst
ChrisHirst
1DMF
  • Locked
  • Question
HTML5 number input - FF validatoin tooltip / control function
Replies
5
Views
146
1DMF
1DMF
c0deM0nK424
  • Locked
  • Question
Mozilla Firefox Style - New Tab Controls - Thumbnail Images for 'recent websites' viewed ?
Replies
3
Views
152
ChrisHirst
ChrisHirst
cmayo
  • Locked
  • Question
CSS - Elastic div, text and picture alignment
Replies
18
Views
285
1DMF
1DMF
ember1205
  • Locked
  • Question
Form submit, specific controls needed (3rd party site, blank window, message, etc.)
Replies
1
Views
101
ember1205
ember1205

Part and Inventory Search

Sponsor

Back
Top