首页 / CSS / bootstrap -- css -- 图片

bootstrap -- css -- 图片

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了bootstrap -- css -- 图片，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含889字，纯文字阅读大概需要2分钟。

内容图文

图片样式

.img-rounded：添加 border-radius:6px 来获得图片圆角

.img-circle：添加 border-radius:500px 来让整个图片变成圆形。

img-circle优先级高于img-rounded

            <
            body
            >
            <
            img 
            src
            ="/wp-content/uploads/2014/06/download.png"
             
   class
            ="img-rounded"
            >
            <
            img 
            src
            ="/wp-content/uploads/2014/06/download.png"
             
   class
            ="img-circle"
            >
            </
            body
            >

 

图片边框

.img-thumbnail：添加一些内边距（padding）和一个灰色的边框。

            <
            img 
            src
            ="/wp-content/uploads/2014/06/download.png"
             
   class
            ="img-rounded img-thumbnail"
            >
            <
            img 
            src
            ="/wp-content/uploads/2014/06/download.png"
             
   class
            ="img-circle img-thumbnail"
            >

 

图片自适应

img-responsive：让图片支持响应式设计。 图片将很好地扩展到父元素。(图片可随页面大小自动调整宽度)

            .img-responsive {
    display: block;
    max-width: 100%;
    height: auto;
}
            <
            img 
            src
            ="cinqueterre.jpg"
             class
            ="img-circle img-thumbnail img-responsive"
             alt
            ="Cinque Terre"
             width
            ="304"
             height
            ="236"
            >

 

原文：http://www.cnblogs.com/hf8051/p/4472265.html

内容总结

以上是互联网集市为您收集整理的bootstrap -- css -- 图片全部内容，希望文章能够帮你解决bootstrap -- css -- 图片所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/1234489.html

来源：【匿名】