帮我做一个相框效果， 谢谢

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
    </style>
</head>
<body>
    <table border="1" cellpadding="1" cellspacing="1" style="" >
        <tr>
            <td>
                <img class="imgInner" border="0" src="http://drmcmm.baidu.com/media/id=nHD1nWcdrHfd&amp;gp=403&amp;time=nHndrHT3n1TYPs.gif">
                <img src="http://www.photophoto.cn/m64/024/062/0240620078.jpg" />
            </td>
        </tr>
    </table>
</body>
</html>一张图片是相框， 一张图片是照片， 希望把照片放在相框正中间， 谢谢。最好是纯html+css 实现， 不行的话js也可以

解决方案 »

  1.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <script type="text/javascript">
         function init(){
    var img=new Image();
    img.src="http://www.photophoto.cn/m64/024/062/0240620078.jpg";
    var td=document.getElementsByTagName("td")[0];
    td.style.width=img.width+"px";
    td.style.height=img.height+"px";
    }
    window.onload=init;
        </script>
        <style type="text/css">
         td{
    background-image:url(http://www.photophoto.cn/m64/024/062/0240620078.jpg);
    text-align:center;
    vertical-align:middle;
    }
        </style>
    </head>
    <body>
        <table border="1" cellpadding="1" cellspacing="1" style="" >
            <tr>
                <td>
                    <img class="imgInner" border="0" src="http://drmcmm.baidu.com/media/id=nHD1nWcdrHfd&amp;gp=403&amp;time=nHndrHT3n1TYPs.gif">            </td>
            </tr>
        </table>
    </body>
    </html>
      

  2.   


    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <style type="text/css">
    .box {
    width: 600px; height: 508px;
    background: url("http://www.photophoto.cn/m64/024/062/0240620078.jpg");
    }
    .imgInner {
    width: 100%; height: 100%;
    background: url("http://avatar.profile.csdn.net/B/4/0/1_yenange.jpg") no-repeat 50% 50%;
    }
        </style>
    </head>
    <body>
    <div class="box">
    <div class="imgInner">
    </div>
    </div></body>
    </html>