Bootstrap 全局CSS样式：图片类的使用

作者:WangMin
格言:努力做好自己喜欢的每一件事
CSDN原创文章
博客地址 👉 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）和一个灰色的边框

---

就先分享到这里!! 😄 后续继续更新!!