-
border-radiusを使用する方法:
.circle-image { border-radius: 50%; }
この方法では、画像の要素に
circle-image
というクラスを追加し、そのクラスに対してborder-radius
プロパティを50%に設定します。これにより、画像が円形に表示されます。 -
clip-pathを使用する方法:
.circle-image { clip-path: circle(50% at center); }
この方法では、
clip-path
プロパティを使用して円形のクリッピングパスを作成します。circle()
関数を使用し、半径を50%に設定します。at center
は、クリッピングの中心を要素の中心に配置するための指示です。 -
サイズと位置を調整する方法:
.circle-image { width: 200px; height: 200px; object-fit: cover; border-radius: 50%; }
この方法では、
width
とheight
プロパティを使用して画像のサイズを指定します。object-fit: cover;
は、画像を要素にフィットさせるための指示です。また、border-radius
プロパティを50%に設定することで、円形に表示されます。
これらの方法を試して、画像を円形に表示することができます。適切な方法を選択し、デザインに合わせてスタイルを調整してください。