cssでサークルdiv内の画像を切り抜くにはどうすればよいですか？

Question

そこにこんにちは、私はサークルに2つの部分に分かれてのdiv内の画像をトリミングしたいです。片面は半分が切り抜かれ、もう片面はちょうどその上に名前が付いた背景色です。私は現在次のコードを使用しています： width：220px;

userdp { 
    height: 220px; 
    border: 4px solid red; 
    border-radius: 50%; 
    position: relative; 
    object-fit: none; 
} 

Answer 1

あなたのイメージは、あなたがあなただけのCSSにoverflow: hiddenを追加する必要がある必要があり、以下のようにそのスタイルを適用しているdiv要素内にある場合。

<div class="userdp"> 
    <img src="..." /> 
</div> 

そしてスタイリング。

.userdp { 
    height: 220px; 
    width: 220px; 
    border-radius: 50%; 
    overflow: hidden; 
} 

私はあなたのためにここに例を作成しました：z-index、

https://jsfiddle.net/20g4uL0j/1/

Answer 2

overflow: hiddenとより多くのポジショニングと遊ぶ少し、およびobject-fitは、あなたがそれを達成するのを助けることがあります。ここで

は（再読み込み、あなたの質問後に編集）あなたのための例です：

.userdp { 
 
    height: 220px; 
 
    width: 220px; 
 
    border: 4px solid black; 
 
    border-radius: 50%; 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 

 
.userdp-img { 
 
    z-index: 1000; 
 
    width: 100%; 
 
    height: 100%; 
 
    object-fit: cover; 
 
} 
 

 
.userdp-info { 
 
    z-index: 2000; 
 
    width: 50%; 
 
    height: 100%; 
 
    color: #ddd; 
 
    background-color: red; 
 
    border-right: 3px solid black; 
 
} 
 

 
.userdp-info-inner { 
 
    text-align: center; 
 
    position: relative; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
} 
 

 
.userdp-img, 
 
.userdp-info { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
}

<div class="userdp"> 
 
    <div class="userdp-info"> 
 
    <div class="userdp-info-inner"> 
 
     John Doe 
 
    </div> 
 
    </div> 
 
    <img src="https://unsplash.it/300/300?image=1005" class="userdp-img"> 
 
</div>

はそれが助け願っています。次を使用することができます

Answer 3

、

**HTML** 
<div class="circle"> 
<div class="image"> 
    <img src="your-image.png" /> 
</div> 
<div class="color">Text</div> 

**CSS** 
.circle{ 
width: 220px; 
height:220px; 
border-radius: 50%; 
overflow:hidden; 
} 
.image, .color{ 
width:50%; 
float:left; 
height:100%; 
} 
.color{ 
background-color: #099; 
} 

Answer 4

あなたは次のようにこれを行うことができます：

https://jsfiddle.net/ivan0013/f1a06cxe/

div { 
 
    background: #9e978e; 
 
    display: inline-block; 
 
    margin: 0 1em 1em 0; 
 
} 
 

 
.top, 
 
.bottom { 
 
    height: 55px; 
 
    width: 110px; 
 
} 
 

 
.right, 
 
.left { 
 
    height: 110px; 
 
    width: 55px; 
 
} 
 

 
.top { 
 
    border-top-left-radius: 110px; 
 
    border-top-right-radius: 110px; 
 
} 
 

 
.right { 
 
    border-bottom-right-radius: 110px; 
 
    border-top-right-radius: 110px; 
 
} 
 

 
.bottom { 
 
    border-bottom-left-radius: 110px; 
 
    border-bottom-right-radius: 110px; 
 
} 
 

 
.left { 
 
    border-bottom-left-radius: 110px; 
 
    border-top-left-radius: 110px; 
 
}

<div class="top"></div> 
 
<div class="right"></div> 
 
<div class="bottom"></div> 
 
<div class="left"></div>