<翻訳>CSS_html/css_WEB-ITnose で円形の画像を切り取る

451f51fe67f3d9412751cb570e44e23eCSS を使用して円形の画像をカットする

このチュートリアルでは、円形の a1f02c36ba31691bcfe87b2722de723b 要素をレンダリングするための CSS テクニックの使用を紹介します。正方形の画像に円の効果を作成するのは非常に簡単ですが、長方形の画像ではもう少し作業が必要になる場合があります。

デモを見る

ダウンロードソース

正方形の画像

100% 正方形の画像タグを丸い画像タグに変換するには、CSS コードを 1 行だけ必要とします。この手法は正方形の画像に最も効果的です。

HTML

 <img class="circle--square" src="woman.png" />

CSS

.circular--squareP{    border-radius:50%;}

img タグのすべての border-radius 属性を正方形の幅/高さの 50% に設定することで、この img タグを丸くすることができます。

長方形の写真

長方形の写真は少し注意が必要です。

円をレンダリングするには、円形の画像に基づいている必要があります

この問題を解決するには、img タグの外側に div のレイヤーを配置し、この外側の div を超える img タグのコンテンツを切り取ることができます達成するには秋。具体的には、外側の div のオーバーフロー属性を非表示に設定できます。

写真の被写体がトリミングされないようにするには、水平画像と垂直画像を異なる方法で処理する必要があります。

横長の画像

HTML

<div>    <img src="images/brack-obama.png" /></div>

CSS

.circular--landscape{    display:inline-block;    position:relative;    width:200px;    height:200px;    overflow:hidden;    border-radius:50%;}.circular--landscape img{    width:auto;    height:100%;    margin-left:-50%;}

この div (.circular--landscape) を正方形としてレンダリングできるようにするには、高さと幅の属性は同じままでなければなりません

さらに、高さと幅は属性は画像の高さ以下である必要があります。これにより、余分なスペースを残さずに img 要素が外側の div を埋めることができます。

一般的に、水平方向の画像の主題は (必ずではありませんが) 画像の中央に配置されます。写真の被写体が切り取られるのを防ぐために、写真の切り取られた内容が少し右に寄ってしまう問題は、写真を左に移動することで補うことができます。

移動するimgタグのサイズは外側のdivの25%、この例では左に50pxです

margin-left:-50px;

画像の主題を設定することで設定が完了します。方向中心の仮定は必ずしも正しいとは限りません。この手法を使用する前に、この仮定を念頭に置いておくことが最善です。

垂直方向の画像

HTML

<div>    <img src="images/woman-portrait.png" /></div>

CSS

.circular--portrait{    position:relative;    width:200px;    height:200px;    overflow:hidden;    border-radius:50%;}.circular--portrait img{    width:100%;    height:auto;}

垂直方向の画像の主題が垂直方向の中央にあるという仮定は、確かにすべての垂直方向の画像に当てはまるわけではありません。

水平方向の画像と同様に、最良の効果を生み出すために、外側の div の幅と高さは垂直方向の画像の幅と同じである必要があります。

縦向きの画像の場合、幅を 100%、高さを自動に設定します (横向きの画像とは反対)

この写真の被写体は上部にあるため、img 要素を移動する必要はありません中心。

レビュー

このテクニックは、被写体が画像の中央にある正方形の img タグで最も効果的に機能します。ただし、私たちの世界はそれほど完璧ではないので、このような要求がある場合は、div を使用して長方形の img タグを丸くすることができます。

画像を丸くするために使用される CSS のプロパティは border-radius で、辺の丸い角を高さ/幅の 50% に変更すると円を作成できます。

元のリンク:circular-images-css