javascript - 画像の丸で囲まれた領域をhtmlで表示するにはどうすればよいですか?

Question

長方形の画像があります。ただし、以下のように最終結果を達成したいと思います。

CSS/javascriptでこれを達成するにはどうすればよいですか?

Answer 1

タグがある場合は、img以下のスニペットを使用して丸くします

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

デモ

デモ 2 (フチあり)

---

上記の例では、質問で提供したように、楕円形が必要な場合はheight=として完全な円が得られますが、次のようにタグを単純に増やすことができますwidthwidthimg

デモ

注:は CSS3 プロパティです。現在のところ、ブラウザー間で広くサポートされています。IE がゲームのネタバレである場合でも、 CSS3 Pieborder-radiusのようなポリフィルが利用可能です。