Web Analytics Made Easy - StatCounter Sizing images via tables - CodingForum

Announcement

Collapse
No announcement yet.

Sizing images via tables

Collapse
X
Collapse
 
  • Page of 1
  • Filter
  • Time
  • Show
Clear All
new posts
Previous template Next
  • #1

    Sizing images via tables

    I am looking to have my images adjust to screen size. However, it appears to me that while an image will expand in response to a table value, it will not shrink. For instance, if my image has width of 320, the following html still produces a width of 320:

    <td width="150">
    <img src="ngaz.jpg" >
    </td>

    Similarly, setting the width value to anywhere under about 30% (when my screen resolution is 1024), produces no change - it still takes 320 pixels. Is there a way to shrink the image (preferably based on percent width or height)?

    G
    Tags: None
  • #2
    Hmm, when I read your post I thought of two things. First, why don't you just try putting the width attribute in the image tag? Like this:

    <img src="yourimage.jpg" width="" height="">

    Then just the width and height to whatever you want. Alternativley, if you want the image to be a certain size depending on the resolution of a persons screen. You could just detect the res through javascript then have a certain picture display depending on the resolution. I'm not the best js programmer though, so I doubt I will be able to write any code for you. But those were my thoughts. Good luck .
    My Site {Mike's Adventures}

    Yikes, forums are almost too much fun.

    Comment

    • #3
      Pardicity,
      Thanks for the thoughts. The reason that I don't specify the width or height attributes in the tag is because that is exactly what I want to avoid. I want to disply the picture at 460x320 for those who ahve a large resolution. But for those with 800x600 or 640x480, the large size is not so desirable. Yes, I could load a different image dynamically, but I have quite a few images and quite a bit of manipulation on each one, so this means plenty of extra work. Below is a post I found on the old forum on this topic by Roy Sinclair. His approach is nice, but, again, it appears to me that it will not reduce image size, but only expand it.

      G

      Javascript isn't required for this:
      <table width="100%">
      <tr>
      <td width="50%">
      some content
      </td>
      <td width="50%">
      <img src="someoldimage.gif" width="100%">
      </td>
      </tr>
      </table>

      Note that the image is declared but only the width is set, the height is not specified and thus the browser will set the new height for the image in proportion to the width (it's a good way to keep the image from becoming distorted). Setting the width of the image to 100% sets the image width to 100% of the containing block, in this case the table cell which itself is set to be 50% of the total width of the table.

      Comment

      • #4
        In html?,,,, The short answer is "no".

        The image will always "push" the table cell out to the size of the image

        for example. if you had a table cell that is 100 X 100 and the image is 150 x 150, the cell will resize to 150 x 150 UNLESS you set the img tags height and width attributes to 100 x 100 (as pardicity said).

        Setting the minimum size as you explained (the Roy Sinclar approach - not one I have tried) seems the only way to go.

        To accomidate for varying resolutions, I prefer to set a table centered in the browser with all the content inside.
        While the imges will look smaller in the larger resolutions, the overall look and feel of the page wont be lost (Oh and a cunning background can help).

        Short of that, there maybe a javascript or serverside code to do what you want.


        Sorry - not much help ....

        Tonz
        Beware, the Cybertooth tiger cometh

        Comment

        • #5
          Thanks, Tonz... Again, what I want to do is work with a large image - say 460x320 - because I want those with large resolutions to get the full benefit. However, for those with a smaller resolution, I want a dynamic way to resize the window appropriately in order to minimize any need for scrolling.

          G

          Comment

          • #6
            Sorry, just realized I have a JS approach, not a HTML one.

            The logical approach was mentioned.

            Read the size of the window and calculate the proportionate size required. 640 -> 320 = 50% and then re-set the width and height tags.

            I've never tried this but this little sample worked. Ideally you'd want to do this somehow instead of clicking.

            <HTML>
            <HEAD></HEAD>
            <script>
            function resize(pic) {
            proportion=.5
            pic.height = pic.height*proportion
            }
            </script>
            <BODY>
            <img src="picture.jpg" height=300 name=image1>
            <a href="#" onclick=resize(image1)>Resize</a>
            </body>
            </HTML>

            Just a quick idea. Note that that would work both up and down.
            Last edited by Talus; Jul 1, 2002, 03:47 AM.

            Comment

            • #7
              Thanks, Talus. It looks like dynamically adjusting the tag is the only way to do it. However, I want the page to load appropriately for each different screen resolution - clicking will not do it. I will be writing a script to do this.

              G

              Comment

              Previous template Next
              Working...
              X