Page 1 of 1

Auto sizing images within tables?

PostPosted: Fri Feb 24, 2012 8:41 pm
by Alpinist
I'm creating a custom photo album that consists of a table with a photo in each cell. Currently, the TN photos are set to a fixed size (height x width), which is fine for viewing with certain screen resolutions but maybe not ideal for other screen resolutions. Is there any HTML code that will allow me to auto-size the thumbnails based on the screen size of the person viewing it, such as a "best fit" command...? The table width is already set to 100%. So the table width adjusts automatically but not the TNs.

I looked around on the web for an answer but didn't find one. Appreciate any help from the HTML gurus out there. Thanks!

Re: Auto sizing images within tables?

PostPosted: Sun Feb 26, 2012 12:58 pm
by Baarb
Was this for your State Highpoint album? Looks like you worked it out?

Re: Auto sizing images within tables?

PostPosted: Sun Feb 26, 2012 4:41 pm
by Alpinist
Baarb wrote:Was this for your State Highpoint album? Looks like you worked it out?

It is for my highpoint album but the images aren't auto-sized. I don't think it's possible to do that within a table using simple HTML tags.

The table width is auto-sized to the screen resolution of the viewer but the images are currently a fixed size. It looks fine for the mid range display settings. However, you'll get a horizontal scroll bar if your screen is set to a lower resolution, and a lot of blank space at the ultra high screen resolutions. I was hoping that both the table and images would auto-size to fit the viewer's screen.

Re: Auto sizing images within tables?

PostPosted: Mon Feb 27, 2012 7:56 pm
by nartreb
http://www.w3schools.com/tags/att_img_width.asp

Ye olde percent sign works. The containing element is the table cell, so use "100%" width or close to it, if the picture is wider than it is tall.

Example (simple table: one row, two columns. First column has image at 100% column width, second column has same image at 50% column width, aligned center):
Code: Select all
<table border=1 cellpadding=0 width="100%">
<tr>
<td align=center bgcolor=#d5e4de>
   <a href=http://www.summitpost.org/denali-s-summit-ridge/423788>
      <img src=http://images.summitpost.org/small/423788.jpg width="100%">
   </a>
</td>
<td align=center bgcolor=#d5e4de>
   <a href=http://www.summitpost.org/denali-s-summit-ridge/423788>
      <img src=http://images.summitpost.org/small/423788.jpg width="50%">
   </a>
</td>
</tr>
</table>

Notice that you should set width OR height, not both. Note that browsers may not know the table row height at the time they're trying to draw the image, so it's better to set the image's width (the window width is known, and that determines the column width). For each image, set a value that makes sense depending on the image's orientation (landscape vs portrait. )

Also be aware that if you expand a small image, it gets pixellated. You can see that in the left image in this example, if you're using a decent-sized monitor. Might not be a problem with more images per row, but if it is, use the "medium" images from summitpost instead of "small".

(If you want you can detect the window size in javascript and reload images with larger versions if necessary, but that's a little beyond basic html.)

My usual approach to screen size problems is to ignore them - if you're looking at images on a three-inch device, you need more help than my HTML can give you, and if you're using a four-foot-wide screen, you don't really need my help. Website developers who *have* to support multiple form factors usually serve up at least two different versions of every page (the UI has to change anyway if the site is going to do anything useful with a phone's touch screen).

However, sometimes I do have a page with lots of small photos that I want to lay out elegantly on both toy-sized laptops and industrial-size monitors. In those cases I usually forget about tables, and put each photo (of fixed size) in its own DIV. That allows browsers to lay down as many DIVs across as will fit, then start a new row of DIVs. You don't control how many rows you end up with, and you may have an unfinished row at the end, but you do fill the available screen space pretty efficiently.

Example:
http://www.davidalbeck.com/photos/2011/heart_ov_zteel/
View the source - it's simpler than tables.

Re: Auto sizing images within tables?

PostPosted: Mon Feb 27, 2012 11:25 pm
by nartreb
PS forgot to point out that in the Heart Ov Zteel example page, the key to the layout is that every div is styled with "float:left". I did that with a STYLE tag (defining a class "outer" which I apply to every DIV) in the HEAD of the page, but that won't work on SummitPost since you don't have access to the HEAD. I can probably think of a workaround (inline javascript that runs on image load and updates the DOM?) but the simpler (if very tedious) method is to put a style attribute in every DIV tag.

http://www.w3schools.com/tags/att_standard_style.asp
http://www.w3schools.com/css/css_float.asp

Re: Auto sizing images within tables?

PostPosted: Thu Mar 01, 2012 4:27 am
by Alpinist
I tried the width=100 % for an entire row of the images previously but that didn't work. Maybe the images in the other rows or columns interferred with it? When I expanded the screen resolution to 1600 x 900 I expected that each of the images in that one row would have filled their cells - and they didn't... I'll play with it some more. Thanks!

Re: Auto sizing images within tables?

PostPosted: Sun Mar 11, 2012 11:01 pm
by nartreb
One wild guess: If you had a space before the percent sign, your browser would think you meant 100 pixels.

Also, I'm not sure what the standard says about the timing of the size calculation. (And some browsers are notorious for ignoring standards.) Your browser might not be recalculating the value of 100% when you resize the window. Make sure you reload the page when you test it.

Re: Auto sizing images within tables?

PostPosted: Sat Apr 21, 2012 11:48 pm
by Diego SahagĂșn
I wonder if it's posible to add CSS in a SP table, it would so interesting...

Re: Auto sizing images within tables?

PostPosted: Sun Apr 22, 2012 2:42 am
by lcarreau
[youtube]http://www.youtube.com/watch?v=GUK-cjW8Hzo[/youtube]

Re: Auto sizing images within tables?

PostPosted: Mon Apr 23, 2012 10:07 am
by Diego SahagĂșn