Question

我正在尝试使用twitter-bootstrap示例

http://twitter.github.io/bootstrap/examples/carousel.html

如果您转到该页面，您会看到有三个光圈，其中写有140X140。

我想在那个圈子里有一个图像..

以下是相关代码

<div class="span4">
              <img class="img-circle" data-src="holder.js/140x140">
              <h2>foobar</h2>
              <p>Elaborate</p>
              <p><a class="btn" href="#">View details &raquo;</a></p>
            </div><!-- /.span4 -->

我如何实现这一目标？

感谢。

Answer 1

它只使用border-radius样式。图像实际上是一个方形图像，但border-radius样式修剪角落使其成为圆形。

.img-circle {
-webkit-border-radius: 500px;
-moz-border-radius: 500px;
border-radius: 500px;
}

我建议您不要加载图像来执行此操作。你可以用这样的div做同样的事情：

HTML

<div class="img-circle"></div>

CSS

.img-circle {
background:#555;
width: 140px;
height: 140px;
-webkit-border-radius: 500px;
-moz-border-radius: 500px;
border-radius: 500px;
}

Answer 2

为什么不用自己的图像替换图像而不是将图像插入图像

而不是 -

<img class="img-circle" data-src="holder.js/140x140">

此

<img class="img-circle" data-src="yourImage.jpg">

Answer 3

Holder.js： Holder完全在客户端呈现图像占位符。

http://imsky.github.io/holder/

Answer 4

抱歉，我有点晚了，尝试将data-src =“”更改为 src =“”然后将img链接/名称放在“”的

之间

在twitter bootstrap中指定图像

4 个答案: