所以这就是我想要做的:
我有一个常规的矩形图像,我想显示为圆形图像。我怎样才能做到这一点?
我希望我做对了:
你有一个矩形的非方形图像,像这样
(宽度>高度)或像这样
(高度>宽度)
并且你想在不扭曲它的情况下将它显示在一个圆圈中,可能尽可能多地显示它和中心部分,如下所示:
当你知道图像的大小时,它真的很简单:你把它放在一个包装器中,给一个包装器 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 ):468px
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 ) 。
我使用了一些不同方向尺寸的图像进行测试。一个的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);
尝试
img { border-radius:50%; }
请注意,图像必须具有相同的宽度和高度才能正常工作。如果图像没有,您也可以使用 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>
有一个白色方形图像,中间有一个透明圆圈并覆盖在图像上。