Question

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

我遇到的问题是即使锚标记有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

找到以下代码可以正常工作。

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

你可以试试这个：

<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;
}

Answer 3

所以我找到了一个相当脏的答案，但是正在为我需要的东西而努力......

原始问题似乎只影响移动设备，特别是Android Chrome。出于某种原因，如果图像小于60像素，图像会隐藏在浏览器中，不确定这种情况发生的原因或原因，但我的工作方法如下：

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

使用上面的代码可以使背景图像保持其图像比例，并将其置于其所处元素的中心位置。

Answer 4

它对我来说很好用

但是如果你想让你的背景透明化使用rgba值

父母的边界半径50％没有圆角

4 个答案: