html - サークル画像ラッパーの作り方

Question

以下に示すように、ユーザーが自分のマシンに画像を保存する場合に、元の画像と同じ幅と高さの正方形のイメージを css で作成する方法を示します。

Answer 1

この効果を実現するには、イメージ コンテナーの境界半径を設定し、非表示のオーバーフロー値を適用します。例はここにあります - http://jsfiddle.net/8jbD5/1

あなたのhtmlは次のようになります：

<div id="imgCont">
    <img src="theimage.jpg" />
</div>

そしてCSS：

#imgCont{border:8px solid #f00;border-radius:50%;overflow:hidden;width:200px;height:200px}
#imgCont img{width:100%;height:100%;}

これが役立つことを願っています...

Answer 2

次の例を参照してください: http://dabblet.com/gist/5450624 (Firefox 20/Chrome でテスト済み)。
400x400 jpg 画像を使用し、その上/左オフセットを調整しました。

関連CSS

div {
  position: relative;
  width: 0;
  height: 0;
  border: 180px silver solid;
  -webkit-border-radius: 180px;
  -moz-border-radius: 180px;
  border-radius: 180px;
}

figure {
    position: absolute;
    top: -120px;
    left: -180px;
    width: 200px;
    height: 200px;
    border: 10px red solid;
    overflow: hidden;
    -webkit-border-radius: 120px;
    -moz-border-radius: 120px;
    border-radius: 120px;
}

img {
   position: absolute;
   z-index: 1;
   left: -100px;
   top: -100px;
}

マークアップ

<div>
  <figure>
    <img src="...">
  </figure>
</div>

---

サンプル出力

Answer 3

いくつかの選択肢があります。

まず、元の画像として背景画像を持つ要素 (div など) を持つことができます。次に、その div の内側に、元の画像が下から見えるように、内側の円の内側に部分的な透明度を持つ画像がありました。

次に、上記と同様に行うことができますが、透明な画像を使用する代わりに、CSS と HTML を組み合わせて円を作成できます。ここにいくつかの素晴らしいデモがあります。

第三に、そしておそらく最もハックな方法は、すべてを1つの画像に入れ(質問のように)、.htaccess直接アクセスで別のファイルを提供するために使用することです。ただし、信頼できる結果が得られない場合があります。ここに説明する素敵なSOの答えがあります。