SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,777
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Image getting Squished

    The gremlins are really after me tonight?!

    Any idea what might be "squishing" the thumbnail in this screen-shot?? (It should be twice as high as it is wide.)

    Attachment 60683


    Here is the HTML related to it...
    HTML Code:
    	<td class='colThumbnail'><a href='/articles/consider-becoming-an-s-corporation'><img src="/images/S-Corp.png" width="100" alt="Picture: S-Corp.  Credit: John Doe, Wikimedia Commons." title="Picture: S-Corp.  Credit: John Doe, Wikimedia Commons." /></a></td>
    	<td class='colArticleThread'><a href='/articles/consider-becoming-an-s-corporation'>Consider Becoming an S-Corporation</a></td>
    The only thing that might have changed is the HTML that is stored in my database. (No code or CSS was changed.)

    Maybe this is another area where mucking around in my database tonight screwed things up?!

    Could it be an issue of whether I use Single Quotes or Double Quotes??

    Thanks,


    Debbie

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,198
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    We need more info, like the dimensions of the image and the CSS applying to it, but I'd say width="100" has something to do with it.

  3. #3
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,777
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    We need more info, like the dimensions of the image and the CSS applying to it, but I'd say width="100" has something to do with it.
    Okay, thanks for the tip.

    I looked in my Styles and found this...

    HTML Code:
    #subscriptions td.colThumbnail img{
    	height: 30px;
    	margin: 10px auto 10px auto;
    	display: block;
    }

    And I had added width="<some value>" to the HTML I am storing in my database, so the browser was s-t-r-e-t-c-h-i-n-g the image to 150px wide and squishing it to 30px high, thus the weird effect!!

    Soooo, is there a way to keep width="<some value>" in my database, and for this particular application, use height: 30px but keep the proportions the same so that an original image of, say, 160px wide by 120px high would change to 40px wide by 30px high?!

    (I think I have some larger design issues here of how to store my Copy and HTML, but I'll leave that for another forum...)

    Thanks,


    Debbie

  4. #4
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,519
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    If you use different classes or ids in the different applications for the same image, then you can delete width="somevalue" from the database markup and apply the required property:value in css. If only one dimension is declared, width or height, the browser will scale the image proportionally; therefore, height can rule one application and width can rule another for the same image.

    If you need to keep width="somevalue" in your database, then the width property will have to be included in your css to override the width attribute in markup.

  5. #5
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,777
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ronpat View Post
    If you use different classes or ids in the different applications for the same image, then you can delete width="somevalue" from the database markup and apply the required property:value in css. If only one dimension is declared, width or height, the browser will scale the image proportionally; therefore, height can rule one application and width can rule another for the same image.

    If you need to keep width="somevalue" in your database, then the width property will have to be included in your css to override the width attribute in markup.
    Thanks for the tips. They give me some ideas.

    However, unfortunately, I think my bigger issue is that I need to re-design how my Articles are stored in MySQL... *sigh*

    Thanks,


    Debbie

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    If you set width to auto in the css then that will over-ride the width attribute in the image tag and then your 30px css height will take effect and the width will be scaled to match the aspect ratio that the 30px height requires.

  7. #7
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,777
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    If you set width to auto in the css then that will over-ride the width attribute in the image tag and then your 30px css height will take effect and the width will be scaled to match the aspect ratio that the 30px height requires.
    Hi Paul!!

    Thanks for the tip! That may come in handy.

    However, I am still looking at this from a PHP/Database design standpoint.

    Also trying to figure out if I should have One Image or many Re-sized Images. (See my thread under "Web Design" for more.)

    Thanks,


    Debbie


Bookmarks

Posting Permissions

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