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

这就是我想做的：

我有一个规则的矩形图像，我希望显示为圆形图像。我该怎么做

---

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

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

< P> >

img { border-radius:50%; }

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

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

试一试

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

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

---

您只需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>

---

您只需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>

---

我希望我做对了：

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

高度/>

宽度>高度还是这样

宽度/>

高度>宽度

你想把它显示成一个圆圈而不扭曲它， 也许你能展示它和它的中心部分， 大概是这样的：

解决： 当你知道图像的大小时，其实很简单：你把它放在一个包装中，给包装一个宽度和高度，两者都等于图像本身的宽度和高度之间的最小值。然后给出包装器边界半径：50%；和溢出：隐藏

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

如果图像的宽度大于其高度 图像，然后将其左边距设置为“高度-宽度/2” 否则，如果图像id的高度大于其宽度 纵向图像，然后将其上边距设置为宽度/高度/2 相关HTML：

或者，您可以使用JavaScript解决方案，我建议这样做，因为如果您不知道图像的方向、纵向或横向，或者不知道图像的尺寸，您可以在标记中列出

我使用了一些不同方向和大小的图像进行测试。其中一个的HTML：

JavaScript:

---

我希望我做对了：

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

高度/>

宽度>高度还是这样

宽度/>

高度>宽度

你想把它显示成一个圆圈而不扭曲它， 也许你能展示它和它的中心部分， 大概是这样的：

解决： 当你知道图像的大小时，其实很简单：你把它放在一个包装中，给包装一个宽度和高度，两者都等于图像本身的宽度和高度之间的最小值。然后给出包装器边界半径：50%；和溢出：隐藏

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

如果图像的宽度大于其高度 图像，然后将其左边距设置为“高度-宽度/2” 否则，如果图像id的高度大于其宽度 纵向图像，然后将其上边距设置为宽度/高度/2 相关HTML：

或者，您可以使用JavaScript解决方案，我建议这样做，因为如果您不知道图像的方向、纵向或横向，或者不知道图像的尺寸，您可以在标记中列出

我使用了一些不同方向和大小的图像进行测试。其中一个的HTML：

JavaScript:

---

这很好，但是如果图片很大，那么它就会变成椭圆形。给它一个相等的宽度和高度。这会弄乱纵横比。如果你密切关注你发布的图片，它就是一个正方形的图片，用同样的技术变成了一个圆形。它可以是一个正方形变成一个完美的圆形，也可以是一个矩形变成椭圆形。如果你想在拥有一个完美的圆形的同时保持纵横比，你必须用JS或CSS或canvas将图像的一部分剪切掉，或者将其设为背景，但是，如果你不提供更多的细节，我就无法真正改进我的答案。这很好，但是如果图像很大，那么它就会变成椭圆形。给它一个相同的宽度和高度。这会弄乱纵横比。如果你密切关注你发布的图像，它就是一个正方形图像，用同样的技术变成了一个圆形。它要么是一个正方形变成了一个完美的圆形，要么是一个长方形变成了椭圆形。如果你想在拥有一个完美的圆形的同时保持纵横比，你就必须用JS或CSS或画布将其设置为背景，但如果你不提供更多的细节，我无法真正改进我的答案。谢谢，感谢你的努力：谢谢，感谢你的努力：

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

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

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