1

所以这就是我想要做的:

在此处输入图像描述

我有一个常规的矩形图像,我想显示为圆形图像。我怎样才能做到这一点?

(图片来源)

4

4 回答 4

7

我希望我做对了:

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

    宽度 > 高度

    (宽度>高度)或像这样

    高度 > 宽度

    (高度>宽度)

  • 并且你想在不扭曲它的情况下将它显示在一个圆圈中,可能尽可能多地显示它和中心部分,如下所示:

    围成一圈



解决方案:

当你知道图像的大小时,它真的很简单:你把它放在一个包装器中,给一个包装器 awidth和 a height,它们都等于图像本身的thewidth和 the之间的最小值。height然后你给包装器border-radius: 50%;overflow: hidden;.

接下来,您定位图像,使中心部分可见。

  • 如果width图像的 大于其height (风景图像),则将其左边距设置为(height-width)/2
  • 否则,如果height图像 id 大于其width (portrait image),则将其上边距设置为(width-height)/2

演示

相关HTML

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

横向图像的相关CSS(尺寸:x ):468px159px

.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 解决方案(我建议这样做是因为您在标签中列出了 ) 。

演示

我使用了一些不同方向尺寸的图像进行测试。一个的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);
于 2012-10-13T10:06:32.757 回答
2

尝试

img { border-radius:50%; }

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

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

小提琴

于 2012-10-13T07:53:35.197 回答
1

你所需要的只是 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>
于 2012-10-13T07:56:45.833 回答
0

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

于 2012-10-13T07:52:45.910 回答