Webmaster Forum

Go Back   Webmaster Forum > Web Development > Coding Forum

Coding Forum Problems with your code? Discuss coding issues, including JavaScript, PHP & MySQL, HTML & CSS, Flash & ActionScript, and more.


Closed Thread
 
Thread Tools Display Modes
Share |
  #1  
Old 05-03-2011, 04:41 AM
srajanbill1976 srajanbill1976 is offline
Junior Member
 
Join Date: 05-03-11
Location: india
Posts: 17
iTrader: 0 / 0%
How to resize an image with HTML

need some html image re size corrections
 

Advertisement

Advertisement

  #2  
Old 05-03-2011, 12:31 PM
goldsun goldsun is offline
Contributing Member
 
Join Date: 04-23-11
Posts: 74
iTrader: 0 / 0%
in the image tag just set the width and/or the height to the size you want it to be and it should be automatically adjusted.

It is better though to resize the image offline in photoshop or picasa and use this as otherwise it means your site uses more bandwidth and loads more slowly.
 
  #3  
Old 05-04-2011, 03:47 PM
diondevelopment diondevelopment is offline
Junior Member
 
Join Date: 05-04-11
Posts: 14
iTrader: 0 / 0%
HTML:
<img src="theimage.png" width="200" height"300" alt="the image" />

CSS:
<img src="theimage.png" style="width: 200px; height: 300px;" alt="the image" />
 
  #4  
Old 05-04-2011, 07:44 PM
xizheyb xizheyb is offline
Junior Member
 
Join Date: 03-16-11
Posts: 17
iTrader: 0 / 0%
Cool

Quote:
Originally Posted by diondevelopment View Post
HTML:
<img src="theimage.png" width="200" height"300" alt="the image" />

CSS:
<img src="theimage.png" style="width: 200px; height: 300px;" alt="the image" />
this right
 
  #5  
Old 05-04-2011, 07:48 PM
HTMLBasicTutor's Avatar
HTMLBasicTutor HTMLBasicTutor is offline
Administrator
 
Join Date: 10-29-07
Location: Canada
Posts: 26,562
iTrader: 5 / 100%
Quote:
Originally Posted by diondevelopment View Post
HTML:
<img src="theimage.png" width="200" height"300" alt="the image" />

CSS:
<img src="theimage.png" style="width: 200px; height: 300px;" alt="the image" />
Quote:
Originally Posted by xizheyb View Post
this right
Not necessarily.

If you don't change the width and height in proportion then the image will be distorted.

Also, as already mentioned sort of, the browser will download the original image as hosted on the web server and then resize the image according to the hard coded dimensions you have. This will slow down the rendering of your page because the browser has to download the original image and resize it. It is much better to resize the image properly in imaging software and upload the correct size for use.
 
  #6  
Old 05-05-2011, 01:37 AM
nemrod's Avatar
nemrod nemrod is offline
v7n Mentor
 
Join Date: 12-21-10
Location: Sweden
Posts: 463
iTrader: 0 / 0%
Quote:
Originally Posted by HTMLBasicTutor View Post
Not necessarily.

If you don't change the width and height in proportion then the image will be distorted.

Also, as already mentioned sort of, the browser will download the original image as hosted on the web server and then resize the image according to the hard coded dimensions you have. This will slow down the rendering of your page because the browser has to download the original image and resize it. It is much better to resize the image properly in imaging software and upload the correct size for use.
To offer a solution to the proportion problem HTMLBasicTutor mentioned: simply change one value (height or width) and have the other at auto - the image will be resized proportionally.
 
  #7  
Old 05-05-2011, 05:02 AM
HarmoneyJaxon's Avatar
HarmoneyJaxon HarmoneyJaxon is offline
Member
 
Join Date: 04-26-11
Location: Spain
Posts: 32
iTrader: 0 / 0%
Set the height and the width equally within your HTML.
If your original graphic dimensions are 60x90, if you desire to reduce your image size to one half, you change the width to 30 and the height to 45.

Original:
<img src="flyhighbird.jpg" width="60" height="90">

Resize:
<img src="flyhighbird.jpg" width="30" height="45">
 
  #8  
Old 05-05-2011, 05:49 AM
brainp's Avatar
brainp brainp is offline
Contributing Member
 
Join Date: 04-06-11
Posts: 59
iTrader: 0 / 0%
Yes. You can easily resize the size of image with image tag with height and width property.
 
  #9  
Old 05-05-2011, 09:30 PM
untungsupriono's Avatar
untungsupriono untungsupriono is offline
Junior Member
 
Join Date: 05-05-11
Posts: 13
iTrader: 0 / 0%
html is not a graphics program, images should be sized to the exact size required prior to uploading. Sizing with html will only result in bad looking images.
 
  #10  
Old 05-05-2011, 11:08 PM
nemrod's Avatar
nemrod nemrod is offline
v7n Mentor
 
Join Date: 12-21-10
Location: Sweden
Posts: 463
iTrader: 0 / 0%
Quote:
Originally Posted by untungsupriono View Post
html is not a graphics program, images should be sized to the exact size required prior to uploading. Sizing with html will only result in bad looking images.
Not with a browser capable of image scaling. You should get one.

If it's expected that the viewer will view the large version of the image and it isn't excessively big there is no reason to create an additional thumbnail IMO. If it's an image gallery with plenty of pictures it's a whole 'nother story though.
 
Go Back   Webmaster Forum > Web Development > Coding Forum

Closed Thread


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Resize uploaded image moomeg12 Coding Forum 3 03-03-2010 05:36 AM
Resize Image Script BromptonWeb Content 4 01-03-2009 01:26 PM
Resize Image Please Centertainment Graphic Design Forum 8 08-31-2006 08:17 AM
PHP Image Resize Issue ATLien Coding Forum 2 06-03-2004 09:01 PM
Help, How do you get an image to resize to your specific scr Rocknrob Web Design Lobby 20 12-17-2003 10:51 AM


V7N Network
Get exposure! V7N I Love Photography V7N SEO Blog V7N Directory


All times are GMT -7. The time now is 02:08 AM.
Powered by vBulletin
Copyright 2000-2014 Jelsoft Enterprises Limited.
Copyright © 2003 - 2018 VIX-WomensForum LLC