Sunday, February 28, 2010

Why two different reactions to pic sizing?

I noticed when I sized a picture in two different instances, one made it larger but one sized smaller and the code is the same except for the embedded location. The code for both pics I resized was:
-img width="50%" height="50%" src.....etc
Only difference was that one pic was from a website and in a table cell. The other pic was from my computer and in a paragraph. Just wondering if sizing an img is suppose to react differently depending on what you put it in or if this is some kind of weird fluke?

-Jerami

5 comments:

  1. Can you be more specific and maybe post some more of the code you're using? I get really weird reactions to images if I try to size them using percentages. Instead try to specify the exact pixels you want to re-size to? ie height="50px" width="50px" assuming the original image is 100px by 100px.

    Another thing to try is omitting height from your code. If you simply try sizing via width="50%" I'm pretty sure that the height will follow suit without the actual need to specify a height in the code at all.

    ReplyDelete
  2. Here's the code for the two pics I resized.

    Example 1:
    <table>
    <tr><th>Web Image</th></tr>
    <tr>
    <td style="text-align: center"><img width="50%" height="50%" src="http://www.ffodyssey.com/wallpapers/ff7/ac07wolf_1280x1024.jpg"</td>
    </tr>
    </table>

    Example 2:
    <p><img width="50%" height="50%" src="bleach.jpg" alt="bleach" />
    </p>

    As you can see I sized them the same way but the first one enlarged and the other shrank.

    ReplyDelete
  3. Im not sure how advanced youve gotten but I would ask if you have some type of descendant selector issue happening.

    For instance:
    -Do you have any special parameters on your paragraph or table set regarding sizing? Sometimes having certain sizes set for fonts or borders can impact the image when placed as you have it.

    If youd like to send me the full file in a zip folder Ill look at it with you. Im no pro but I like trying to figure these things out.

    rmailloux11@mail.bristol.mass.edu

    ReplyDelete
  4. Three things you may want to try troubleshooting:

    Have you checked to verify that both images are the same actual size? If they differ, the percentages could cause them to display at different sizes.

    Is there padding on the 'cell' "td" tag where the image is displayed? Again, since you are using a percentage if the area in which to display the image is smaller then your image may display smaller too.

    You might want to try creating another "td" and try displaying your image in it, and vice versa with displaying the web image in the same "p" tag as your image.

    Let us know!

    Thanks,

    Shaunna

    ReplyDelete
  5. I second what Shaunna stated. The image size is the first thing that dictates how the percentages play out. I just made a page using 1 image in different containers and they all sized the same.
    even though the containers were of differing sizes.

    ReplyDelete

Note: Only a member of this blog may post a comment.