0

twitter-bootstrap の例で実験しようとしています

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

ページに移動すると、140X140 と書かれた 3 つの明るい円があることがわかります。

私はそのサークルにイメージを持たせようとしています..

以下は関連するコードです

<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 -->

どうすればそれを達成できますか?

ありがとう。

4

4 に答える 4

2

単純に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;
}
于 2013-04-06T20:30:01.577 に答える
1

Sorry I'm a bit late, try changing data-src="" to src="" then put the img link/name in between the " " 's

于 2014-02-10T05:44:28.067 に答える
1

画像を挿入するのではなく、独自の画像に置き換えてみませんか

それ以外の-

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

これ

<img class="img-circle" data-src="yourImage.jpg">
于 2013-04-06T20:32:42.590 に答える