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)和一个灰色的边框


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

本文链接http://element-ui.cn/article/show-122690.aspx