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>

查看全文

相关阅读:
DS博客作业04--图
 DS博客作业03--树
 DS博客作业02--栈和队列
 DS博客作业01--线性表
 C博客作业05--指针
 C语言博客作业04--数组
 C博客作业03--函数
 博客作业——循环结构
 C博客作业05-指针
 C博客作业04--数组

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