css - Containing image in a rounded overflow div

Question

Chrome is working fine in containing an image with an overflow:hidden rounded div, however safari does not do a good job at this, the overflow: hidden doesn't seem to work here.

here's an example

here is my sass code:

.profile-image-container
  position: relative
  top: 3px
  display: inline-block
  cursor: pointer

  .profile-image 
    width: 33px
    height: 33px
    display: block
    position: relative
    border: 2px solid $default-border-color
    position: relative
    top: -5px
    border-radius: 50%
    -moz-border-radius: 50%
    -webkit-border-radius: 50%
    overflow: hidden

haml:

.profile-image-container
    .profile-image
      =image_tag "avatar.jpg"
    %span.status.online
      %i.icon.icon-check-small

fiddle: http://jsfiddle.net/LB2EQ/

Answer 1

问题 1.在 Safari 中图像不继承border-radius，所以你必须添加它。

问题 2。您的图像具有与配置文件图片容器不同的宽度和高度，这就是为什么如果您不调整它的大小，您会看到一个非常奇怪的边框半径（仅左上角）。

.profile-image img{
    width:33px;
    height:33px;
    border-radius:50%;
}

请参阅 jsfiddle 上的工作解决方案：http: //jsfiddle.net/LB2EQ/1/