Stop Images from stretching or expanding table

MikeMCSD · Sep 21, 2004

Say I have a <table> with a <td width=150 height=200> cell.
I want to load images of all different sizes into the cell
but I want to keep the cell the same size without a larger
image expanding the cell, and I also want the image not to
stretch by width or height, distorting the image.
Ex: for a 250 wide image you would only see the first 150
of it with the rest being cut off . . I don't want the
image to be resized within the 150, distorting it.
Is this possble with HTML?

Thanks

Foamcow · Sep 22, 2004

No

A table cell will always expand to the size of it's content.

You might be able to do it if you put each image in a div inside the cell. Then set the overflow of the div to none.
But to be honest even if this does work (which I doubt cross browser/platform) it is a nasty solution.

http://www.foamcow.com

"I'm making time

ChrisHunt · Sep 22, 2004

I can think of two ways to do it, both should work in modern browsers. As foancow says, you could use a <div> to clip the image:

Code:

<html>
<head>
  <title>Clipped Pictures</title>
</head>
<body>
  <table border="1">
    <tr>
      <td>
        <div style="height:100px; width: 100px; overflow: hidden;">
          <img src="bigpic.gif" />
        </div>
      </td>
    </tr>
  </table>
</body>
</html>

Alternatively, you could make the image a background image:

Code:

<html>
<head>
  <title>Clipped Pictures</title>
</head>
<body>
  <table border="1">
    <tr>
      <td style="height:100px; width:100px; background: url(bigpic.gif) no-repeat;">
        &nbsp;
      </td>
    </tr>
  </table>
</body>
</html>

Obviously, I'd use classes and ids instead of inline styles when doing it for real.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

Foamcow · Sep 22, 2004

Actually, yes, background images!
That's much neater really.

http://www.foamcow.com

"I'm making time

MikeMCSD · Sep 23, 2004

thanks guys . . .
I'll give it a try!

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Stop Images from stretching or expanding table

MikeMCSD

MIS

Foamcow

Programmer

ChrisHunt

Programmer

Foamcow

Programmer

MikeMCSD

MIS

Similar threads

Part and Inventory Search

Sponsor