html - 父级上的边框半径 50% 不圆 Angular

Question

我有一个 anchor 标记，其上有 border-radius: 50%，宽度和高度固定。子元素是一个图像标签，它的高度固定为 30px，但 width: auto 因为动态图像源始终是横向图像，所以它的宽度将大于 30px。

我遇到的问题是，即使 anchor 标记具有 border-radius: 50% 和 overflow: hidden，图像仍然出现在容器外部。

我已经尝试将 opacity: 0.99 和 background-color: #FFFFFF 添加到 anchor 标记，但所做的只是让图像位于 background-color 后面.我试过在它上面设置一个 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

发现下面的代码工作正常。

.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>