画像は、私は、このCSSコードを使用して、円の中に、ユーザーのプロフィールの写真を表示しようとしていますCSS

Question

を使用して下部にカットされている。

.circle { 
 
    margin: auto; 
 
    width: 200px; 
 
    height: 200px; 
 
    border-radius: 50%; 
 
    -webkit-border-radius: 50%; 
 
    -moz-border-radius: 50%; 
 
    overflow:hidden; 
 
    } 
 
    .circle img{ 
 
     width:100%; 
 
    }

<div class='circle'> 
 
    <img src='https://static.pexels.com/photos/2438/nature-forest-waves-trees.jpg'> 
 
     </div>

問題があり、画像は下で切断されている：

しかし、私は完全なCIRに表示する画像を期待しましたcle。なぜこれが起こっているのですか？どのように修正できますか？

Answer 1

、あなたはそうしないと、画像が100％の最短辺を行う必要がある、あなたは全体のイメージを示すことにしたい場合は正方形の画像を使用する必要があります - 中

.circle { 
 
    margin: auto; 
 
    width: 200px; 
 
    height: 200px; 
 
    border-radius: 50%; 
 
    -webkit-border-radius: 50%; 
 
    -moz-border-radius: 50%; 
 
    overflow: hidden; 
 
} 
 

 
.circle img { 
 
    height: 100%; 
 
}

<div class='circle'> 
 
    <img src='https://static.pexels.com/photos/2438/nature-forest-waves-trees.jpg'> 
 
</div>

：あなたは余分な幅が非表示になりますので、高さを100％にする必要があるので、この場合は画像が風景です

Answer 2

デフォルトでは、imgタグはイメージファイルのサイズからサイズを取ります。この場合、画像は200x200より大きく、画像はdivのサイズよりも小さくなりました。 imgタグにheight: 100%を追加することで、問題は解決されます。

.circle { 
 
    margin: auto; 
 
    width: 200px; 
 
    height: 200px; 
 
    border-radius: 50%; 
 
    -webkit-border-radius: 50%; 
 
    -moz-border-radius: 50%; 
 
    overflow: hidden; 
 
} 
 

 
.circle img { 
 
    width: 100%; 
 
    height: 100%; 
 
}

<div class='circle'> 
 
    <img src='https://static.pexels.com/photos/2438/nature-forest-waves-trees.jpg'> 
 
</div>

上記回答は200×200であることが画像を伸ばすことに留意されたいです。あなたはこのストレッチをしたくない場合は、私が代わりにbackground-imageを使用します。

.circle { 
 
    margin: auto; 
 
    width: 200px; 
 
    height: 200px; 
 
    border-radius: 50%; 
 
    -webkit-border-radius: 50%; 
 
    -moz-border-radius: 50%; 
 
    overflow: hidden; 
 

 
    background-image: url('https://static.pexels.com/photos/2438/nature-forest-waves-trees.jpg'); 
 
background-size: cover; 
 
background-repeat: no-repeat; 
 
background-position: center; 
 
}

<div class='circle'> 
 
</div>

Answer 3

あなたがIEで興味がない場合は、object-fit: coverを確実にする素晴らしい方法です画像を常にすることを利用可能なスペースをカバーしながら、同時にその比率を維持する。私のコメントを1として

.avatar { 
 
    display: inline-block; 
 
    width: 200px; 
 
    height: 200px; 
 
    border-radius: 100%; 
 
    overflow: hidden; 
 
} 
 

 
.avatar img { 
 
    width: 100%; 
 
    height: 100%; 
 
    object-fit: cover; 
 
}

<div class="avatar"> 
 
    <img src="https://static.pexels.com/photos/2438/nature-forest-waves-trees.jpg" /> 
 
</div> 
 

 
<div class="avatar"> 
 
    <img src="https://images.unsplash.com/photo-1504125130065-19cd3d71c27a?dpr=1&auto=format&fit=crop&w=2134&q=60&cs=tinysrgb" /> 
 
</div>