CODEWITHSUNDEEP
htmlcss
BEE bee
BEE bee

Reputation: 31

Why are my images being distorted in my table?

Here is a link to the page that is having issue: http://sites.udel.edu/materials-characterization/ .

As you can see, the images in the 1-row, 6-column table are being wildly distorted. I'm terrible with coding tables and their css and can't seem to work it so that the images will show as 120px by 120px. I'm sure it's something simple and obvious, but I just haven't been able to get it right. I've tried setting these settings in my css:

td {
  padding:0px;
  width:16.6%;
  margin:0px;}

To no avail.

This is the table's html:

<table>
  <tr>
    <td><img style="height: 120px;" src="http://imageshack.com/a/img661/7633/1iiqa5.png" alt="" /></td>
    <td><img style="height: 120px;" src="http://imageshack.com/a/img905/7443/rsWUcI.png" alt="" /></td>
    <td><img style="height: 120px;" src="http://imageshack.com/a/img537/6786/ISbtBn.png" alt="" /></td>
    <td><img style="height: 120px;" src="http://imageshack.com/a/img912/2283/wjNYwR.png" alt="" /></td>
    <td><img style="height: 120px;" src="http://imageshack.com/a/img673/7112/0wOLLR.png" alt="" /></td>
    <td><img style="height: 120px;width:120px;" src="http://imageshack.com/a/img661/8118/qKGYlR.png" alt="" /></td>
  </tr>
</table>

Thank you in advance for any advice you can give me!

Upvotes: 1

Views: 1342

Answers (3)

xengravity
xengravity

Reputation: 3589

Remove #content img{max-width:100%}. You are specifying a height for all the images which are skewing the image ratios.

Upvotes: 3

pavel
pavel

Reputation: 27092

You set padding: 6px 24px; on line 743 in style.css which override padding: 0; declared in the question.

Upvotes: 0

NiloVelez
NiloVelez

Reputation: 3659

I'd switch to a responsive approach. Remove the style attribute on your tags and add this to the css:

td img {
   max-width: 100%;
   height: auto;
   }

This way, the images might get scaled but shouldn't be distorted.

Upvotes: 0

Related Questions