div放置图片总结

1. 图片居中

<html>
    <style>
    #image{ 
        width:500px;
        height:500px;
        background:#fff000;
        text-align: center;
        overflow: hidden;
    }
    #image img {
　　　　vertical-align: middle;
　　 }
    #block {
        width: 0px;
        height: 100%;
    }    
    </style>
    <body>
        <div id="image">
            <img src="http://www.mm21.cn/dimg6/qqtu/201105/20110507234620615.jpg"/>
             <img src="" id="block"/>
        </div>
    </body>
</html>

2. 图片原图显示，超出部分隐藏。

<html>
    <style>
    #image{ 
        width:500px;
        height:500px;
        background:#fff000;
        overflow: hidden;
    }
    </style>
    <body>
        <div id="image">
            <img src="http://cms.smu.sh.cn:888/imagesStore/mmLib/superstar/2009/11/23/07BA1B0C79B146AA9AF32C10F2A5BCD2.jpg"/>
        </div>
    </body>
</html>

3. 填满div，拉伸或者缩放图片。

<html>
    <style>
    #image{ 
        width:500px;
        height:500px;
        background:#fff000;
    }
    #image img{
        width: 100%;
        height: 100%;
    }
    </style>
    <body>
        <div id="image">
            <img src="http://cms.smu.sh.cn:888/imagesStore/mmLib/superstar/2009/11/23/07BA1B0C79B146AA9AF32C10F2A5BCD2.jpg"/>
        </div>
    </body>
</html>

4. div大小跟随图片变化

<html>
    <body>
        <div>
            <img src="http://www.mm21.cn/dimg6/qqtu/201105/20110507234620615.jpg"/>
        </div>
    </body>
</html>

 

 

posted @ 2012-07-05 23:34  垚淼  阅读(2151)  评论(0)  编辑  收藏  举报