HTML and CSS

Automagically resize images?

Please support our HTML and CSS advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

Thread Solved

•

Join Date: Feb 2008

Posts: 632

Reputation: daviddoria is a jewel in the rough

Solved Threads: 46

daviddoria daviddoria is offline

Offline

Practically a Master Poster

Automagically resize images?

Oct 9th, 2009

Is there anyway to get images to be the "correct" size - i.e. fit the width of the text?

This is what currently happens:
http://engineeringnotes.net/personal/pictures.shtml

Thanks,

Dave

•

Join Date: Jan 2009

Posts: 1,357

Reputation: almostbob has a spectacular aura about

Solved Threads: 163

almostbob

Offline

Nearly a Posting Virtuoso

-1

Oct 9th, 2009

those are the actual sizes of the images, not the desired size

 Help with Code Tags 
 html Syntax (Toggle Plain Text) 
  <div id="main">
<h1>Pictures</h1>
<img width='594' height='292' alt='alt text is a requirement' src="Pictures/3DIM_poster.jpg" />
Poster presentation at 3DIM 2009.
<img width='594' height='612' alt='alt text is a requirement'  src="Pictures/scanner_inside.jpg" />
Leica HDS3000 LiDAR scanner in the lab.
<img width='594' height='612' alt='alt text is a requirement'  src="Pictures/scanner_outside.jpg" />A day of scanning in Troy.
</div>
  <div id="main">
<h1>Pictures</h1>
<img width='594' height='292' alt='alt text is a requirement' src="Pictures/3DIM_poster.jpg" />
Poster presentation at 3DIM 2009.
<img width='594' height='612' alt='alt text is a requirement'  src="Pictures/scanner_inside.jpg" />
Leica HDS3000 LiDAR scanner in the lab.
<img width='594' height='612' alt='alt text is a requirement'  src="Pictures/scanner_outside.jpg" />A day of scanning in Troy.
</div>

I just pulled the sizes off the smallest image, and resized the others by proportion 730*752 > 594*612

its not a good idea to use html to resize images to suit the layout
actually resize the images with Irfanview, paintshop etc,
and serve them the correct size, (still with the sizes specified in the xhtml) smaller images = faster load times

notes
1:: the layout sucks, fixed width central column may look good on your pc,
mine is 2400px wide, what a waste of space
Ems and % are the dimensions of choice, width will adjust to screen and window size, keeping the same proportion as your design screen, on a wider range of systems
2:: incidental; the only bugs in the code is the missing alt tags in those images

Last edited by almostbob; Oct 9th, 2009 at 9:44 pm.

Failure is not an option It's included free, you don't have to do anything to get it
If at first you dont succeed, join the club
Of course its always in the last place you look, you dont keep looking after you find it

Please mark solved problems, solved

•

Join Date: Feb 2008

Posts: 632

Reputation: daviddoria is a jewel in the rough

Solved Threads: 46

daviddoria daviddoria is offline

Offline

Practically a Master Poster

Oct 10th, 2009

I agree about the layout. However if I let the page expand to the screen width then the images specified in pixels will look too big/small unless the resolution is the same as my design resolution, right?

•

Join Date: Jan 2009

Posts: 1,357

Reputation: almostbob has a spectacular aura about

Solved Threads: 163

almostbob

Offline

Nearly a Posting Virtuoso

-1

Oct 10th, 2009

they already look poor

•

Join Date: Sep 2007

Posts: 271

Reputation: fatihpiristine has a little shameless behaviour in the past

Solved Threads: 16

fatihpiristine fatihpiristine is offline

Offline

Posting Whiz in Training

Oct 10th, 2009

there is an event handler for img tags complete/oncomplete run a javascript

Do a favour, leave me alone

•

Join Date: Jun 2008

Posts: 348

Reputation: Troy III will become famous soon enough

Solved Threads: 42

Troy III

Offline

Posting Whiz

Oct 10th, 2009

•

Originally Posted by daviddoria

Is there anyway to get images to be the "correct" size - i.e. fit the width of the text?

This is what currently happens:
http://engineeringnotes.net/personal/pictures.shtml

Thanks,

Dave

So you want them to be looking something like this (see attachment image)?
Add this line in your
CSS

Help with Code Tags

HTML and CSS Syntax (Toggle Plain Text)