Совершенная кружком изображение превращается в половину овальной формы

Question

Если у меня есть DOM структуры, как это:

<li> 
    <a> 
    <h2></h2> 
    <img> 
    <p></p> 
    <button></button> 
    </a> 
</li> 

И я хочу, чтобы изображение было идеально круглым, как бы я достичь этого? Я попытался с помощью следующих после просмотра this article:

.circle-box { 
    width: 70%; 
    height: 0; 
    margin-top: 10px; 
    padding-bottom: 70%; 
    border-radius: 50%; 
} 

Но с помощью этого я не получаю изображение на всех из-за height: 0;, но если я удалю, что после этого я получаю вертикальный овал изображение, где округляется только половина изображения , как это:

Как это исправить?

Answer 1

Это можно сделать, используя border-radius. Но вы должны установить равную высоту и ширину изображения и предоставить радиус границы только для верхнего и правого.

Демо: http://jsfiddle.net/lotusgodkk/GCu2D/728/

CSS:

img {  
    border-radius:50% 50% 0 0; 
    height:600px; //sample 
    width:600px; //sample 
} 

HTML:

<img src="http://www.lorempixel.com/600/600/sports/1/" /> 

В случае неравной ширины и высоты изображения, вы можете заменить img с div, а затем установите изображение в качестве фона.

CSS:

div { 
    width:500px; 
    height:500px; 
    border-radius:50% 50% 0 0; 
    background-image:url("http://www.lorempixel.com/600/400/sports/1/"); 
    background-repeat:no-repeat; 
    background-size:cover; 
} 

Демо: http://jsfiddle.net/lotusgodkk/GCu2D/729/

Answer 2

Просто укажите радиус границы до 50%. Это будет трюк.

.circle-box { 
    border-radius: 50%; 
}