图片

响应式图片

通过为图片添加 .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}