Fit td size to image size CSS

Question

I have a question. I tried to found this but I couldn't in that way. I have <td> in table which is empty. But after load a picture as a <td> background which size is 800x600 <td> needs to be 800X600 as well. I want it dynamically.

I tried to use CSS in few ways but its not working properly. It fitting my image to <td>

<td class="plan"></td>

.plan{
        border: 1px solid black; 
        background: url(../graphics/plan.png) no-repeat ;
        background-size: 100% 100%;
}

Answer 1

You can try this http://jsfiddle.net/aamir/TTGS9/2/

$(function(){
    var bgImg = $('<img src="'+$('td').css('background-image').replace('url(','').replace(')','')+'" />');
    bgImg.hide().bind('load', function(){
        var $this = $(this);
        $('td').width($this.width()).height($this.height());
        $this.remove(); //not needed
    });
    $('body').append(bgImg);
});