1

これが私がやりたいことです：

ここに画像の説明を入力

通常の長方形の画像があり、丸みを帯びた画像として表示したい。これどうやってするの？

（画像クレジット）

4

4 に答える 4

7

私はこれが正しいことを願っています：

  • このような長方形の非正方形の画像があります

    幅 > 高さ

    （幅>高さ）またはこのように

    高さ > 幅

    (高さ > 幅)

  • そして、おそらくそれと中央部分を表示できる限り、それを歪ませずに円で表示したいとします。次のようになります。

    輪になって

ソリューション:

画像のサイズがわかっていれば、それは非常に簡単です。画像をラッパーに入れて、画像自体のと の間の最小値に等しいawidthと aをラッパーに与えます。次に、ラッパーと.heightwidthheightborder-radius: 50%;overflow: hidden;

次に、中央部分が見えるように画像を配置します。

  • 画像の がその(横長widthの画像) より大きい場合、左マージンを次のように設定します。height (height-width)/2
  • それ以外の場合、height画像 ID がそのwidth (portrait image)よりも大きい場合は、その上部マージンを次のように設定します。(width-height)/2

デモ

関連するHTML :

<a href='#' class='circle-wrap'>
    <img src='image.jpg'>
</a>

横長の画像に関連するCSS (寸法: x ):468px159px

.circle-wrap {
    overflow: hidden;
    width: 159px; height: 159px; /* height of img */
    border-radius: 50%;
}
.circle-wrap img {
    margin: 0 0 0 -154px; /* (height-width)/2 */
}

別の方法として、画像の向き (縦または横) またはその寸法について何も知らない場合は、JavaScript ソリューションを使用することもできます (タグにがリストされているため、これをお勧めします) 。

デモ

テスト用に、さまざまな向きのサイズの画像をいくつか使用しました。1つのHTML：

<a class='circle-wrap' href='#'>
  <img src='image.jpg'>
</a>

関連するCSS :

.circle-wrap {
  overflow: hidden;
  padding: 0;
  border-radius: 50%;
}
.circle-wrap img { display: block; }

JavaScript :

var wrps = document.querySelectorAll('.circle-wrap'), 
    toCircle = function(a) {
      var style, w, h, img;
      for(var i = 0; i < a.length; i++) {
        style = window.getComputedStyle(a[i]);
        w = parseInt(style.width.split('px')[0],10);
        h = parseInt(style.height.split('px')[0],10);
        /* part that makes the wrapper circular */
        a[i].style.width = a[i].style.height = Math.min(w,h)+'px';
        /* part that takes care of centering imgs */
        img = a[i].querySelector('img');
        if(w > h)
          img.style.marginLeft = ((h - w)/2) + 'px';
        else if(w < h)
          img.style.marginTop = ((w - h)/2) + 'px';
      }
    };

toCircle(wrps);
于 2012-10-13T10:06:32.757 に答える
2

試す

img { border-radius:50%; }

これが機能するには、画像の幅と高さが同じでなければならないことに注意してください。画像がそうでない場合は、CSS で幅と高さを設定することもできます。

img { border-radius:50%; width:200px; height:200px; }

フィドル

于 2012-10-13T07:53:35.197 に答える
1

これを行うために必要なのは CSS だけです。

<img class='circle' src='/my/img/path/img.jpg' />

<style type="text/css">
    img.circle {
        -ie-border-radius: 50%;    /* IE */
        -khtml-border-radius: 50%; /* KHTML */
        -o-border-radius: 50%;     /* Opera */
        -moz-border-radius: 50%;   /* Mozilla / FF */
        -webkit-border-radius: 50%;/* Chrome / Safari */
        border-radius: 50%;        /* CSS Compliant */
    }
</style>
于 2012-10-13T07:56:45.833 に答える
0

中央に透明な円がある白い正方形の画像を用意し、画像の上に重ねます。

于 2012-10-13T07:52:45.910 に答える