定义图片样式。
基础样式定义在 base
中。
img {
box-sizing: border-box;
max-width: 100%;
height: auto;
vertical-align: middle;
border: 0;
}
如上面的代码所示, base
里已经设置了 max-width: 100%
,图片会自动适应到容器的宽度(但不会超过图片原始宽度),不需要添加额外的 class(演示)。如果要让图片始终和容器一样宽,需要设置 width: 100%
。
<img src="http://pic1.win4000.com/pic/1/e5/1c643f6e2d_130_170.jpg" alt=""/>
为<img>
元素设置不同的 class,增强其样式。
.am-img-bdrs
圆角.am-img-circle
圆形,一般用于正方形的图片(你要觉得椭圆好看,用在长方形上也可以).am-img-thumbnail
边框<img src="..." alt="..." class="am-img-bdrs">
<img src="..." alt="..." class="am-img-circle">
<img src="..." alt="..." class="am-img-thumbnail">