作者:
WangMin
格言:努力做好自己喜欢的每一件事
响应式图片
通过为图片添加.img-responsive
类可以让图片支持响应式布局,也就是给图片设置max-width: 100%;
、height: auto;
和display: block;
属性,从而让图片在其父元素中更好的收缩。另外,如果需要让使用了.img-responsive
类的图片水平居中,请使用.center-block
类,不要用.text-center
。
<img src="..." class="img-responsive" alt="响应式图片"/>
图片形状
通过为<img>
元素添加以下相应的类,可以让图片呈现不同的形状。
<img src="../img/timg.jpg" class="img-rounded" width="200px"/>
<img src="../img/timg.jpg" class="img-thumbnail" width="200px"/>
<img src="../img/timg.jpg" class="img-circle" width="200px"/>
img-rounded 通过 border-radius : 6px 来获得图片圆角
img-circle 通过 border-radius : 50% 来让整个图片变成圆形
img-thumbnail 添加一些内边距(padding)和一个灰色的边框
就先分享到这里!! :smile: 后续继续更新!!