如何将常规图像显示为圆形图像？

Question

所以这就是我想要做的事情：

我有一个普通的矩形图像，我希望显示为圆角图像。我怎样才能做到这一点？

(Image credit)

Answer 1

我希望我做对了：

• 你有一个矩形的非方形图像，就像这样

  

  （宽度>高度）或者像这样

  

  （身高＆gt;宽度）

• 并且您希望将其显示在一个圆圈中而不会扭曲它， 可能你可以显示它和中心部分， 像这样的东西：

  

---

---

解决方案：

当您知道图像的大小时，它非常简单：您将它放在一个包装器中，给一个包装器width和height都是相同的至少在图像本身的width和height之间。然后，您将提供包装器border-radius: 50%;和overflow: hidden;。

接下来，定位图像，使中央部分可见。

• 如果图片的width大于其height （横向广告素材） 图像），然后将其左边距设置为(height-width)/2
• 否则，如果图片ID的height大于其width （肖像图片），然后将其上边距设置为(width-height)/2

demo

相关的 HTML ：

<a href='#' class='circle-wrap'>
    <img src='image.jpg'>
</a>

横向图片的相关 CSS （尺寸：468px x 159px）：

.circle-wrap {
    overflow: hidden;
    width: 159px; height: 159px; /* height of img */
    border-radius: 50%;
}
.circle-wrap img {
    margin: 0 0 0 -154px; /* (height-width)/2 */
}

---

或者，您可以使用JavaScript解决方案（我建议这样做是因为您在标签中列出javascript）如果您对图像的方向（纵向或横向）一无所知或其尺寸。

demo

我使用了一些不同方向尺寸的图像进行测试。一个 HTML ：

<a class='circle-wrap' href='#'>
  <img src='image.jpg'>
</a>

相关的 CSS ：

.circle-wrap {
  overflow: hidden;
  padding: 0;
  border-radius: 50%;
}
.circle-wrap img { display: block; }

<强>的JavaScript ：

var wrps = document.querySelectorAll('.circle-wrap'), 
    toCircle = function(a) {
      var style, w, h, img;
      for(var i = 0; i < a.length; i++) {
        style = window.getComputedStyle(a[i]);
        w = parseInt(style.width.split('px')[0],10);
        h = parseInt(style.height.split('px')[0],10);
        /* part that makes the wrapper circular */
        a[i].style.width = a[i].style.height = Math.min(w,h)+'px';
        /* part that takes care of centering imgs */
        img = a[i].querySelector('img');
        if(w > h)
          img.style.marginLeft = ((h - w)/2) + 'px';
        else if(w < h)
          img.style.marginTop = ((w - h)/2) + 'px';
      }
    };

toCircle(wrps);

Answer 2

尝试

img { border-radius:50%; }

请注意，图像必须具有相同的宽度和高度才能生效。如果图像没有，您也可以使用CSS设置宽度和高度。

img { border-radius:50%; width:200px; height:200px; }

Fiddle

Answer 3

你需要的只是CSS来做到这一点：

<img class='circle' src='/my/img/path/img.jpg' />

<style type="text/css">
    img.circle {
        -ie-border-radius: 50%;    /* IE */
        -khtml-border-radius: 50%; /* KHTML */
        -o-border-radius: 50%;     /* Opera */
        -moz-border-radius: 50%;   /* Mozilla / FF */
        -webkit-border-radius: 50%;/* Chrome / Safari */
        border-radius: 50%;        /* CSS Compliant */
    }
</style>

Answer 4

在中间有一个带有透明圆圈的白色方形图像，并覆盖在图像上。