Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 16
  1. #1
    New to the CF scene
    Join Date
    Dec 2002
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question How can i make the image fit into the table and shrink or strecth accordingly?

    i want to make a table that contains an image. The problem is the image is quite large (800px*50px) and when put into the table, it is clipped. How can i make the image fit into the table and shrink or strecth accordingly when the table size changed.

    this what i'm doing :


    <table width="50%" border="0" cellpadding="0" cellspacing="0" style="background-image:url(pic.gif)">
    <tr>
    <td>Something</td>
    </tr>
    </table>

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Location
    ColoRockyz
    Posts
    1,646
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Try taking out the width=50%
    Zoobie or not Zoobie...That is the problem.
    <body onUnload="flush( ! )">

  • #3
    New Coder
    Join Date
    Oct 2002
    Location
    || Canada ||
    Posts
    70
    Thanks
    0
    Thanked 0 Times in 0 Posts
    If you want to specify a size for your table whether % or px, then unless the table is the same size as your image, your image is going to get clipped either way.

    You could always try using an image that is easily repeatable and do it that way.

    Honest, I don't know to-to much or perhaps I'm on the right track. Having your table and image the same size can be done by making sure both are the same size.
    But to make the image resizable with the table, well, I don't believe that can be done... ? ...

    I wonder if CSS or some sort of coding can be use

  • #4
    Senior Coder
    Join Date
    Jul 2002
    Posts
    1,628
    Thanks
    0
    Thanked 0 Times in 0 Posts
    if your table spanned 50% height and 50% width
    you could just span the image inside the table 100% height and 100% width.
    this way it will span the inside of the tables height and width specifications ...
    the tables size will contain the images maximum size

    Moderator: General web building

    Get out from under them, resist and multiply.
    Get out from under precipice and see the sky.

  • #5
    New Coder
    Join Date
    Oct 2002
    Location
    || Canada ||
    Posts
    70
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Now I'm a bit confused, I thought this image in question was to be the background of the table..?

    <table width="50%" border="0" cellpadding="0" cellspacing="0" style="background-image:url(pic.gif)">
    Is it to just be 'inserted' into the table then?

    Now if image is to be the background, how to you specify images in this case, to be 100% w and h??

  • #6
    Senior Coder
    Join Date
    Jul 2002
    Posts
    1,628
    Thanks
    0
    Thanked 0 Times in 0 Posts
    my mistake

    Moderator: General web building

    Get out from under them, resist and multiply.
    Get out from under precipice and see the sky.

  • #7
    New Coder
    Join Date
    Oct 2002
    Location
    || Canada ||
    Posts
    70
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Okay, now I have to know where you got that smilie cg9com

    Anyhow, regarding this 100% image thing.. can that actually be done though? You insert and just make the image 100% w and h.. mm.. now I will leave and test this out

    and it appears that is does work... mind you I guess that was common sense on my part

    Can you specify 100% h and w for your background image in a table?
    Last edited by undyingfires; 12-11-2002 at 08:01 PM.

  • #8
    Senior Coder
    Join Date
    Jun 2002
    Location
    Wichita
    Posts
    3,880
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I think that in order to get this to work you'll need to wrap the table in a <div> and set the width of the div to 50% then declare the image inside the div using a width of 100% so it will scale to the size of the div. Then the table will have to be declared with a width of 100% and a position: relative style so it lays over the top of the image.

  • #9
    Regular Coder
    Join Date
    Nov 2002
    Posts
    672
    Thanks
    1
    Thanked 1 Time in 1 Post
    Look at the source of my homepage. http://XFox_Prower.tripod.com.
    I used backgrounds in 8 different tables to create a horizontal effect. But notice how it doesn't overflow or display loopingly.

  • #10
    Senior Coder
    Join Date
    Jul 2002
    Posts
    1,628
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Originally posted by undyingfires
    Okay, now I have to know where you got that smilie cg9com
    i just found it *shrug*
    click my sig and go to "smilies" directory

    Moderator: General web building

    Get out from under them, resist and multiply.
    Get out from under precipice and see the sky.

  • #11
    Regular Coder
    Join Date
    Sep 2002
    Location
    Louisiana
    Posts
    576
    Thanks
    0
    Thanked 0 Times in 0 Posts
    you could do it in javascript
    <img src="*.jpg" height="this.tablename.tdname.height" width="this.tablename.tdname.width">

  • #12
    New to the CF scene
    Join Date
    Dec 2002
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Originally posted by Roy Sinclair
    I think that in order to get this to work you'll need to wrap the table in a <div> and set the width of the div to 50% then declare the image inside the div using a width of 100% so it will scale to the size of the div. Then the table will have to be declared with a width of 100% and a position: relative style so it lays over the top of the image.

    i have tried your suggestion

    <div style="width:50%">
    <img src="pic.gif" width="100%">
    <table width="100%" border="0" cellpadding="0" cellspacing="0" style="position:relative">
    <tr>
    <td>Something</td>
    </tr>
    </table>
    </div>

    but the word "Title" appears at the bottom of the image not on top of it.

    i modified the above to be like this

    <table width="100%" border="0" cellpadding="0" cellspacing="0">
    <div style="position:absolute; z-index:-10">
    <img src="pic.gif" width="100%">
    </div>
    <tr>
    <td>Title</td>
    </tr>
    </table>

    now it works and the image wil fit perfectly into the table as a background image and will shrink/strecth accordingly as i resize the table (ie resizing IE window). no more clipping.

    but another problem is i will be using this table as a template and it will appears in many different pages. i don't want to hardcode the name of the image (pic.gif in this case) so that i won't be in trouble when there is a need to change the name of the image or applies a new image.

    the reason i used background-image style as in my first attempt was i thought of putting the style in a css file and link the file into those webpages so i can change the image name globally.

    i guess javascript can do the trick as mentioned by chrismiceli

    you could do it in javascript
    <img src="*.jpg" height="this.tablename.tdname.height" width="this.tablename.tdname.width">
    but how do i really do it? i'm not familiar with javascript.

  • #13
    New to the CF scene
    Join Date
    Dec 2002
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Originally posted by vkiat
    i have tried your suggestion

    <div style="width:50%">
    <img src="pic.gif" width="100%">
    <table width="100%" border="0" cellpadding="0" cellspacing="0" style="position:relative">
    <tr>
    <td>Something</td>
    </tr>
    </table>
    </div>

    but the word Title appears at the bottom of the image not on top of it.
    Should be "Something" not "Title"

  • #14
    Regular Coder
    Join Date
    Nov 2002
    Posts
    672
    Thanks
    1
    Thanked 1 Time in 1 Post
    Well that's because the table containing that Something text was after the image. Try this:

    <TABLE cellspacing="0" cellpadding="0">
    <CAPTION align="center">Some text</CAPTION>
    <TR><TD><IMG src="pic.gif"></TD></TR>
    </TABLE>

    The <DIV> tag doesn't seem necessary unless it is to arrange this part of your page with the rest.

  • #15
    New to the CF scene
    Join Date
    Dec 2002
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    still having problem here.

    (please read posting on 12-12-2002 01:55 PM)


    Tails, your suggestion wouldn't make the image the background of the table. i might need to put more rows,cells and other elements (text, buttons) into the table. am i right?

    Please help. Thanks a lot!


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •