I've created a table. In my table, all widths and heights are set to percentage values (td width="10%" height="5%") rather than pixels, so that the table will scale proportionately to the users browser resolution. I want to insert an image into a cell. I want the image to scale to the size of the container (cell), rather than it's actual size, without increasing (or decreasing) the size of the container. Can I do that by setting the image values to 100% (img src="xxxxx.zzz" width="100% height="100%")? Is there a way to do that in CSS, or does it have to be specified in HTML. Can you advise of any other way to acomplish this?

  • You already asked this question, so I'm answering it again http://doctype.com/setting-width-image-table-cell You should probably approach the whole resolution dependant site thing differently though: http://www.themaninblue.com/writing/perspective/2006/01/19/ Tony Crockford about 10 years ago

2 answers

This was chosen as the best answer

According to the spec lengths expressed as percentages are based on the horizontal or vertical space currently available, not on the natural size of the image.

so to answer your question, the image should scale to the size of the table cell. (works in Safari for sure)

My experiments show me that you cannot declare this 100% width/height in CSS it has to be in the html:

<img src="image.jpg" width="100%" height="100%" />
Answered about 10 years ago by Tony Crockford

Without a link or code, we're kind of working in the dark here.

Are you trying to stretch the image? Or do you just want full coverage of the cell? Is the image site content or site furniture? If it's site furniture, like checkmarks in a feature grid or game pieces on a board, you might consider using background images for the cells. The nice thing about backgrounds is that the cell will crop them to size. If you're clever you can pin the background image (or center it) to always show the focal point at any scale.

Answered about 10 years ago by Alex Taylor