完美的圆圈图像变成半椭圆形

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

将border-radius设为50％。它会起作用。

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