图片<img >

响应式图片

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

<img src="..." class="img-responsive" alt="响应式图片">

图片形状

注意： IE8以下不支持圆角、圆形效果。

<img src="..." alt="..." class="radius"> 
<img src="..." alt="..." class="round"> 
<img src="..." alt="..." class="thumbnail">

图集

《仙剑奇侠传》赵灵儿(20张)

头像

HTML代码

<img class="avatar size-MINI radius" src="//static.h-ui.net/h-ui/images/ucnter/avatar-default.jpg">

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}