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?
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%" />
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.