Question

I have a table with 1 row, and 3 columns. It’s look like:

______________________
| |                | |
| |                | |
| |                | |
| |                | |
| |                | |
| |                | |
| |                | |
----------------------

The table has 940px width and 600px height. The first td and the last td should be the “container” sides. The web designer draw a concave – ) ( – PNG images for the sides. I must insert it with <img src""/>, because if I put the image for background, the image doesn’t stretches. The problem is with the height of the image. Because every page is dynamic, I can’t define the table height, or the image height. Every page should have auto height, but the problem is with the sides. If I insert the image with height=’100%’, the page goes long to the bottom of the page, because it has 2000px height. I tried with height:inherit, but no result. How could I declare the image?

Answer 1

You can use a background image and add background-size: contain or background-size: auto 100%.