div放置图片总结

最新推荐文章于 2023-09-12 10:29:19 发布

weixin_30662539

最新推荐文章于 2023-09-12 10:29:19 发布

阅读量1.1k

点赞数 2

原文链接：http://www.cnblogs.com/ljmin/archive/2012/07/05/2578597.html

版权

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>

转载于:https://www.cnblogs.com/ljmin/archive/2012/07/05/2578597.html

weixin_30662539

关注

2
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
div放置图片总结

1. 图片居中<html> <style> #image{ width:500px; height:500px; background:#fff000; text-align: center; overflow: hidden; } #...
复制链接

扫一扫