Image getting Squished

HTML & CSS
1

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.)

Here is the HTML related to it…


	<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

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

Okay, thanks for the tip.

I looked in my Styles and found this…


#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

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

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

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

Hi Paul!! :wavey:

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