Auto Sizing Images Within Tables? : Page Help - SummitPost

Toggle navigation

• Mountains
• Routes
• Images
• Trip Reports
• Forum
• What's New
• • People
  • Areas & Ranges
  • Articles
  • Trailheads
  • Canyons
  • Huts & Campgrounds
  • Albums
  • Logistical Centers
  • Fact Sheets
  • Lists
  • Custom Objects
  • Gear
  • Plans & Partners

WELCOME TO SUMMITPOST

• SIGN IN
• REGISTER

Toggle navigation

• Forum Links
  • View active topics
  • View unanswered posts
• Useful Links
  • Mark forums read
  • View Unread Posts
  • Advanced Search
  • Feedback
  • FAQ
  • The team

×

Login

Username: Password: I forgot my password Log me on automatically each visit

• Board index Site Discussion Page Help

Auto sizing images within tables?

Get HTML help, style input, and feedback on your pages from other SP members. Post a reply Options 10 posts Page 1 of 1 Alpinist Posts: 6864Joined: Tue Jul 29, 2003 7:21 pm Thanked: 1096 times in 742 posts

Auto sizing images within tables?

by Alpinist » Fri Feb 24, 2012 8:41 pm

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! Top Baarb Posts: 408Joined: Tue Jun 06, 2006 6:42 pm Thanked: 43 times in 30 posts

Re: Auto sizing images within tables?

by Baarb » Sun Feb 26, 2012 12:58 pm

Was this for your State Highpoint album? Looks like you worked it out? Top Alpinist Posts: 6864Joined: Tue Jul 29, 2003 7:21 pm Thanked: 1096 times in 742 posts

Re: Auto sizing images within tables?

by Alpinist » Sun Feb 26, 2012 4:41 pm

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. Top nartreb Posts: 2233Joined: Sat Apr 03, 2004 10:45 pm Thanked: 184 times in 155 posts

Re: Auto sizing images within tables?

by nartreb » Mon Feb 27, 2012 7:56 pm

http://www.w3schools.com/tags/att_img_width.aspYe 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. my photos Top The following user would like to thank nartreb for this postAlpinist, Baarb, Diego Sahagún nartreb Posts: 2233Joined: Sat Apr 03, 2004 10:45 pm Thanked: 184 times in 155 posts

Re: Auto sizing images within tables?

by nartreb » Mon Feb 27, 2012 11:25 pm

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.asphttp://www.w3schools.com/css/css_float.asp my photos Top Alpinist Posts: 6864Joined: Tue Jul 29, 2003 7:21 pm Thanked: 1096 times in 742 posts

Re: Auto sizing images within tables?

by Alpinist » Thu Mar 01, 2012 4:27 am

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! Top nartreb Posts: 2233Joined: Sat Apr 03, 2004 10:45 pm Thanked: 184 times in 155 posts

Re: Auto sizing images within tables?

by nartreb » Sun Mar 11, 2012 11:01 pm

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. my photos Top The following user would like to thank nartreb for this postlcarreau Diego Sahagún Posts: 14465Joined: Sun Oct 07, 2001 6:21 pm Thanked: 748 times in 682 posts

Re: Auto sizing images within tables?

by Diego Sahagún » Sat Apr 21, 2012 11:48 pm

I wonder if it's posible to add CSS in a SP table, it would so interesting... Top lcarreau Posts: 4226Joined: Thu Sep 06, 2007 10:27 pm Thanked: 1898 times in 1415 posts

Re: Auto sizing images within tables?

by lcarreau » Sun Apr 22, 2012 2:42 am

[youtube]http://www.youtube.com/watch?v=GUK-cjW8Hzo[/youtube] "Turkey Vultures always vomit when they get nervous." Top Diego Sahagún Posts: 14465Joined: Sun Oct 07, 2001 6:21 pm Thanked: 748 times in 682 posts

Re: Auto sizing images within tables?

by Diego Sahagún » Mon Apr 23, 2012 10:07 am

http://www.imdb.com/video/screenplay/vi3400007961/ Top Display posts from previous: All posts1 day7 days2 weeks1 month3 months6 months1 year Sort by AuthorPost timeSubject AscendingDescending Post a reply Options 10 posts Page 1 of 1

Return to Page Help

Jump to: Select a forum ------------------ General Discussion General Technique and Training News Gear Classifieds Mountain Medicine & Rescue Ethics, Spray, and Slander Site Discussion Site Feedback Page Help Page Adoption Forum Reworked Pages Bad Submissions Regional Boards - North America California Canada and Alaska Colorado Eastern US (New England, Mid-Atlantic, Southeast) Midwest (Great Plains, Great Lakes) Northern Rockies (ID, MT, WY) Pacific Northwest (WA, OR) Southwest (AZ, NM, NV, TX) Utah Regional Boards - Worldwide Africa Asia Europe Mexico, Central America and Caribbean Oceania and Pacific Islands South America Climbing Partners US - California US - Colorado US - Eastern (New England, Mid-Atlantic, Southeast) US - Midwest (Great Plains, Great Lakes) US - Northern Rockies (ID, MT, WY) US - Pacific Northwest (WA, OR) US - Southwest (AZ, NM, NV, TX) US - Utah Canada & Alaska Africa Asia Europe Mexico, Central America and Caribbean Oceania and Pacific Islands South America

• Related topics Replies Views Last post

• Blank Space above Tables by mrchad9 » Fri Sep 13, 2013 7:12 pm 7 Replies 26432 Views Last post by Josh Lewis Fri Sep 20, 2013 2:25 am
• HTML Help - Sizing Vertical Pictures by MarkDidier » Fri Aug 21, 2009 8:30 pm 6 Replies 4802 Views Last post by MarkDidier Wed Dec 16, 2009 12:03 am
• off site images 1, 2by anita » Fri Sep 13, 2013 5:17 pm 21 Replies 26118 Views Last post by Montana Matt Thu Sep 19, 2013 5:21 pm
• Images in Forum by T Sharp » Fri May 21, 2010 5:01 am 5 Replies 4445 Views Last post by T Sharp Fri May 21, 2010 6:04 am
• Replacing images? by brutus of wyde » Fri Nov 28, 2008 1:44 pm 10 Replies 4759 Views Last post by Gangolf Haub Tue Mar 02, 2010 8:55 pm

Who is online

Users browsing this forum: No registered users and 0 guests

×

You need to login in order to vote!

User Name Password Remember me Forgot your password? Log me out when I close my browser.Keep me logged in all the time. sign in as a user

Don't have an account?

Register now for FREE

• Rating available
• Suggested routes for you
• People who climb the same things as you
• Comments Available
• Create Albums

Register Here