分类目录 共计收录4183站; 资讯文章4628篇; 待审网站 1022站; 当月收录23站; 今日审核0站; 已收到1个打赏!
快审详情
快审qq
首页 > 教程收藏 > CSS教程

响应式图片

图片

响应式图片

通过为图片添加 .img-responsive 类可以让图片支持响应式布局。其实质是为图片设置了 max-width: 100%;、 height: auto; 和 display: block; 属性,从而让图片在其父元素中更好的缩放。BRo网站目录


图片形状

  BRo网站目录

注意: IE8以下不支持圆角、圆形效果。BRo网站目录

  

图集

《仙剑奇侠传》赵灵儿(20张)BRo网站目录

头像

HTML代码


CSS代码

.avatar{display:inline-block;position:relative; overflow:hidden}.avatar img{ display:block}.avatar.radius,.avatar.radius img{border-radius:50%}.avatar,.avatar img{width:32px; height:32px}.avatar.size-MINI{ width:16px;height:16px}.avatar.size-S,.avatar.size-S img{width:24px; height:24px}.avatar.size-M,.avatar.size-M img{width:32px; height:32px}/*默认为中,可以不写,可以理解为:均码*/.avatar.size-L,.avatar.size-L img{width:40px; height:40px}.avatar.size-XL,.avatar.size-XL img{width:64px; height:64px}.avatar.size-XXL,.avatar.size-XXL img{width:100px; height:100px}.avatar.size-XXXL,.avatar.size-XXXL img{width:128px; height:128px}


BRo网站目录


BRo网站目录

此文由 网站目录 编辑,未经允许不得转载!:

评论 暂无评论
-->