图片
响应式图片
通过为图片添加 .img-responsive 类可以让图片支持响应式布局。其实质是为图片设置了 max-width: 100%;、 height: auto; 和 display: block; 属性,从而让图片在其父元素中更好的缩放。
图片形状
IE8以下不支持圆角、圆形效果。
图集
《仙剑奇侠传》赵灵儿(20张)
头像
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}
此文由 at-lib网站目录 编辑,未经允许不得转载!: