javascript - 如何配置 Bootstrap 镜像？

Question

我通过给它一个类 .img-circle 将图像插入到标签中.现在它产生的圆太小了，我想增加半径。
我什至尝试给 <img>标记 width="35px" 的属性，但图像圈没有变化。

请推荐 CSS3 方法或使用 jQuery。

Answer 1

img-circle Bootstrap 类仅以采用圆形形式的方式格式化边框:

.img-circle {
    border-radius: 50%;
}

它根本不会影响图像的大小。
你只需要增加你的形象，这个“圈子”就会随之增加。

这是一个示例，其中包含三个 img-circle 类型的图像，具有不同的大小，由 CSS 类或内联样式描述:

.big-image {
  height: 100px;
  width: 100px;
}

.small-image {
  height: 64px;
  width: 64px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet"/>

<!-- Original square image -->
<img class="big-image" src="http://static.dezeen.com/uploads/2014/07/Google-Material-Design_dezeen_468_3.jpg"/>
<!-- Big circle image with CSS class rule -->
<img class="img-circle big-image" src="http://static.dezeen.com/uploads/2014/07/Google-Material-Design_dezeen_468_3.jpg"/>
<!-- Small circle image with CSS class rule -->
<img class="img-circle small-image" src="http://static.dezeen.com/uploads/2014/07/Google-Material-Design_dezeen_468_3.jpg"/>
<!-- Circle image with inline style -->
<img class="img-circle" style="height: 16px; width: 16px;" src="http://static.dezeen.com/uploads/2014/07/Google-Material-Design_dezeen_468_3.jpg"/>