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>

查看全文

相关阅读:
mysql 约束条件外键 forigen key 介绍
 【洛谷P4655】Building Bridges
【CF1139D】Steps to One
【YbtOJ#20073】钻石守卫
 【YbtOJ#20072】相似子串
 【YbtOJ#20071】礼物购买
 【洛谷P4149】Race
【洛谷P2059】卡牌游戏
 【CF140C】New Year Snowmen
【GMOJ4282】平方数游戏

原文地址：https://www.cnblogs.com/ljmin/p/2578597.html