stretch image to fit in td

Question

I want to stretch an image in my td cell. How to do that. Its is a tab image which looks like inverted of this |____|. I need to place the image in the first td cell which contains the text 'aaa' will come in center of this image. Thanks

Answer 1

Usually, you do this as a background image, specially when you have curved edges.

Your HTML might look something like this:

<ul class="tabs">
    <li><a>Tab 1</a></li>
    <li><a>Tab 2</a></li>
    <li><a>Tab 3</a></li>
</ul>

and the CSS:

<style type="text/css" media="screen">
    .tabs, .tabs li {
        margin:0; padding:0;
        list-style-type:none;
    }
    .tabs li {
        background:url(tab.gif) no-repeat left top;
        padding-left:5px;
        float:left;
        width:100px;
    }
    .tabs li a {
        background:url(tab.gif) no-repeat right top;
        padding-right:5px;
        display:block;
        text-align:center;
    }
</style>

Answer 2

If the table is fixed size, and you know the size of the image, you can apply the image using CSS.

td.tab {
  background: url(images/tab.jpg) no-repeat;
  height: 50px;
  width: 200px;
}

Answer 3

If you really want to stretch your image just make the width="100%" and set height equal to the actual height of your image.

But really you should be using a sliding doors technique http://www.alistapart.com/articles/slidingdoors/ with css background images and some extra markup;

I'd suggest wrapping your aaa in a SPAN and using both the TD and SPAN in place of the LI and A in the sliding doors article

<td style="background: transparent url('images/tab-left.gif') left top no-repeat">
    <span style="background: transparent url('images/tab-right.gif') right top no-repeat; margin-left: 10px">aaa</style>
</td>

Answer 4

The old school way to do it using table cells is like this.

<table>
  <tr>
    <td image="tab-left.gif" width="12" height="32"></td>
    <td background="tab-middle.gif" height="32"> --- your tab's text goes here --- </td>
    <td image="tab-right.gif" width="12" height="32"></td>
  </tr>
</table>

What is happening is that you cut your tab image into three parts. The left which includes the left curve. The middle which includes a vertical stripe taken from some part of the tab which no curve, and the right which includes the right curve.

Answer 5

You cannot stretch a background image without using CSS3.

In CSS3 you have background-size property for which you can give 100% to stretch the image to 100% of the container. But CSS3 isn't supported in all browsers.

You can use an image tag and give the width and height to 100% to achieve this.