bootstrap带边框的圆形头像

kenminkajp

一直对带边框的圆形头像特别羡慕。

今天终于应用bootstrap的两个样式，实现了。
img-circle 实现图片被切成圆形的
img-thumbnail 实现底色，想要多大的边，就把圆底的尺寸设成大于图片的尺寸。图片的属性设成：img-circle img-thumbnail



底色（边框的颜色），通过设定background-color参数来实现
例：background-color:pink

参考连接：http://www.phperz.com/article/16/0104/180303.html
希望对你有帮助。

不羁的风

谢谢

负暄

必须顶！

kenminkajp

谢谢亲们鼓励。抽空写些笔记在论坛，或许可以让更多人少走弯路。

郭德成

支持楼主

glassy2000

必须支持

我是猿

您好，img-circle img-thumbnail图片样式是用到哪个图片上面？？是原图还是截图的框？

kenminkajp

我是猿 发表于 2016-6-18 08:49
您好，img-circle img-thumbnail图片样式是用到哪个图片上面？？是原图还是截图的框？ ...

亲，样式是对应控件设置的属性。图片是装在控件里的，你装什么图都没有关系。

我是猿

kenminkajp 发表于 2016-6-18 10:19
亲，样式是对应控件设置的属性。图片是装在控件里的，你装什么图都没有关系。 ...

那这个样式应该放到哪里？我用的是3.5预览版的框架，显示HTML代码
   <div class="x-panel-content">
   
    <input type="file" value="" xid="inputImage" bind-change="file1Change" accept="image/*" style="display:none;"></input>
  <div component="$UI/system/components/justep/row/row" class="x-row" xid="row1">
   <div class="x-col" xid="col1"></div>
   <div class="x-col x-col-fixed x-col-center" xid="col2" style="width:auto;"><div xid="div1" style="height:90px;width:90px;" class="img-preview "></div>
  </div>
   <div class="x-col" xid="col3"></div></div><div class="cropper-example-1" style="width:436px;height:360px;">
  <img src="picture.jpg" alt="Picture"/>
        </div>
    </div>
您看看应该加到哪里才能截成圆形的图片，谢谢！

遗留的安静

谢谢