zoukankan html css js c++ java

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>

查看全文

相关阅读:
逆袭之旅DAY31.XIA.JDBC
逆袭之旅DAY30.XIA.集合
 亮晶晶幼儿园家校沟通平台的设计与实现
 逆袭之旅DAY28.XIA.异常处理
 LY.JAVA.DAY12.String类
 2018年7月23日-星期二
 LY.JAVA.DAY12.Scanner
DAY27.XIA.面向對象
 职业生涯规划
 如何找到自己喜欢的职业

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