親のボーダー半径50％は角を丸めません

Question

固定幅と高さを持つborder-radius: 50%のアンカータグがあります。子要素は画像タグで、固定高さは30pxですが、width: autoです。動的画像ソースは常に横向きの画像になるため、30pxよりも幅が広いためです。

アンカータグがborder-radius: 50%とoverflow: hiddenの場合でも、画像がコンテナの外に表示されています。

私はopacity: 0.99とbackground-color: #FFFFFFをアンカータグに追加しようとしましたが、画像が背景色の背後にあるようにするだけです。私はz-indexを設定しようとしましたが、絶対に何もしません。

誰にも解決策がありますか？役立つなら、私はサイト上でBootstrap 3.3.2を使用しています。

.name { 
    position: relative; 
    border-radius: 50%; 
    overflow: hidden; 
    width: 30px; 
    height: 30px; 
    display: inline-block; 
} 

.profile-img { 
    position: absolute; 
    top: 0; 
    left: -30px; 
    right: -30px; 
    width: auto; 
    height: 30px; 
    margin: 0 auto; 
} 

<a href="/" class="name"> 
    <img src="imageSource" class="profile-img"> 
</a> 

Answer 1

を

私はtに答えを見つけました彼はかなり汚いですが、私が必要とするもののために働いています...

オリジナルの問題は、モバイルデバイス、特にAndroid Chromeにのみ影響するように見えました。上記のコードを使用して

.profile-img__wrapper { 
    border: 2px solid #d0d0d0; 
    width: 30px; 
    height: 30px; 
    display: block; 
    border-radius: 50%; 
    overflow: hidden; 
    -moz-box-sizing: content-box; 
    -webkit-box-sizing: content-box; 
    box-sizing: content-box; 
} 

.profile-img { 
    width: 30px; 
    height: 30px; 
    background-size: cover; 
    display: block; 
    background-position: 50% 0; 
} 

<span class="profile-img__wrapper"> 
    <span class="profile-img" style="background-image: url('imageSource')"></span> 
</span> 

背景画像を許可する：画像は、必ずより小さい60個のピクセルではなかったかまたは、なぜこれが起こったが、私の仕事は周りの下にある場合、いくつかの理由で、画像はブラウザにそれ自身を隠すだろうそのイメージ比を維持し、それが座っている要素の中心に置くようにします。

Answer 2

以下のコードが正常に動作することがわかります。

.name { 
 
    position: relative; 
 
    border-radius: 50%; 
 
    overflow: hidden; 
 
    width: 30px; 
 
    height: 30px; 
 
    display: inline-block; 
 
    border : 1px solid black; 
 
} 
 

 
.profile-img { 
 
    position: absolute; 
 
    top: 0; 
 
    left: -30px; 
 
    right: -30px; 
 
    width: auto; 
 
    height: 30px; 
 
    margin: 0 auto; 
 
}

<a href="/" class="name"> 
 
    <img src="http://justvidit.co.uk/wp-content/uploads/2015/03/yellow-orange-summer-sun-light-burst-1.jpg" class="profile-img"> 
 
</a>

Answer 3

私には罰金だけでなく、その作品

しかし、あなたはあなたの背景透明利用RGBA値を作るために

Answer 4

をしたい場合は、この試すことができます：

<a href="/" class="name"> 
    <img src="http://placehold.it/350x150" class="profile-img"> 
</a> 

.name { 
    position: relative; 
    border-radius: 50%; 
    overflow: hidden; 
    width: 100px; 
    height: 100px; 
    display: inline-block; 
    border: 1px solid #000; 
} 

.profile-img { 
    position: absolute; 
    top: 0; 
    left: -30px; 
    right: -30px; 
    width: auto; 
    overflow: hidden; 
    height: 100px; 
    margin: 0 auto; 
}