将图像裁剪为正方形，然后使用纯CSS进行圆圈？

Question

我试图用不同大小和形状（一些矩形，一些sqaure，一些肖像，一些景观）的图像圈出来。

当我使用：clip-path: circle(50% at 50% 50%);或border-radius: 50%;，它把图像变成一个完美的圆圈，只有如果图像是方形的：

有没有办法来裁剪图像成一个正方形，然后使用这些方法之一，使之成为完美的圆圈：

1. 使用纯CSS withou使用background-image（大多数图像都是服务器端的背景图像），
2. 保持50％的比例 - 不会损失宽高比 - （如果border-radius或clip-path）（图像大小可能不同）。

这里的代码片段显示一个正方形图像和矩形图像：

.clipped { 
 
    clip-path: circle(50% at 50% 50%); 
 
}

Square<br> 
 
<img src='http://i.imgur.com/d5byNNR.jpg' width="100" class='clipped' /><br><br> 
 
Rectangle<br> 
 
<img src='http://i.imgur.com/22W12EQ.jpg' width="100" class='clipped' />

Answer 1

您可以使用circle()但没有参数：

.clipped { 
    clip-path: circle(); 
} 

它似乎使用图像较小的一面作为圆的圆周ENCE。

工作样本here。

它适用于Chrome和FireFox。 IE和边缘仍然不支持clip-path

Answer 2

这是一个另一种方法做它用纯CSS：

HTML

<div class="circular--portrait"> 
    <img src='http://i.imgur.com/22W12EQ.jpg'/> 
</div> 

CSS

.circular--portrait { 
    position: relative; 
    overflow: hidden; 
    width: 100px; 
    height: 100px; 
    border-radius: 50%; 
} 

.circular--portrait img { 
    width: 100%; 
    height: auto; 
    margin-top: -30px; 
} 

Code Snippet (with portrait and landscape examples)

Answer 3

好了，我花了片刻，但是这是我想出了：

function ScaleImage(srcwidth, srcheight, targetwidth, targetheight, fLetterBox, xOffSet, yOffSet) { 
 

 
\t var result = { width: 0, height: 0, fScaleToTargetWidth: true }; 
 

 
\t if ((srcwidth <= 0) || (srcheight <= 0) || (targetwidth <= 0) || (targetheight <= 0)) { 
 
\t \t return result; 
 
\t } 
 

 
\t // scale to the target width 
 
\t var scaleX1 = targetwidth; 
 
\t var scaleY1 = (srcheight * targetwidth)/srcwidth; 
 

 
\t // scale to the target height 
 
\t var scaleX2 = (srcwidth * targetheight)/srcheight; 
 
\t var scaleY2 = targetheight; 
 

 
\t // now figure out which one we should use 
 
\t var fScaleOnWidth = (scaleX2 > targetwidth); 
 
\t if (fScaleOnWidth) { 
 
\t \t fScaleOnWidth = fLetterBox; 
 
\t } 
 
\t else { 
 
\t fScaleOnWidth = !fLetterBox; 
 
\t } 
 

 
\t if (fScaleOnWidth) { 
 
\t \t result.width = Math.floor(scaleX1); 
 
\t \t result.height = Math.floor(scaleY1); 
 
\t \t result.fScaleToTargetWidth = true; 
 
\t } 
 
\t else { 
 
\t \t result.width = Math.floor(scaleX2); 
 
\t \t result.height = Math.floor(scaleY2); 
 
\t \t result.fScaleToTargetWidth = false; 
 
\t } 
 
\t //result.targetleft = Math.floor((targetwidth - result.width)/2); 
 
\t //result.targettop = Math.floor((targetheight - result.height)/2); 
 

 
\t result.targetleft = Math.floor((targetwidth - result.width)/2 - xOffSet); 
 
\t result.targettop = Math.floor((targetheight - result.height)/2 - yOffSet); 
 

 
\t return result; 
 
} 
 

 
function OnImageLoad(evt, xOffSet = 0, yOffSet = 0) { 
 

 
\t var img = evt.currentTarget; 
 

 
\t // what's the size of this image and it's parent 
 
\t var w = $(img).width(); 
 
\t var h = $(img).height(); 
 
\t var tw = $(img).parent().width(); 
 
\t var th = $(img).parent().height(); 
 

 
\t // compute the new size and offsets 
 
\t var result = ScaleImage(w, h, tw, th, false, xOffSet, yOffSet); 
 

 
\t // adjust the image coordinates and size 
 
\t img.width = result.width; 
 
\t img.height = result.height; 
 
\t $(img).css("left", result.targetleft); 
 
\t $(img).css("top", result.targettop); 
 
}

.result { 
 
    width: 250px; 
 
    height: 250px; 
 
    border: thick solid #666666; 
 
    overflow: hidden; 
 
    position: relative; 
 
    border-radius: 50%;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
No offset: 
 
<div class='result'> 
 
\t <img src="http://i.imgur.com/22W12EQ.jpg" style="position: absolute;" onload="OnImageLoad(event, 0, 0);"/> 
 
</div> 
 
Y offset: 
 
<div class='result'> 
 
\t <img src="http://i.imgur.com/22W12EQ.jpg" style="position: absolute;" onload="OnImageLoad(event, 0, 30);"/> 
 
</div>

我把大部分的工作从此资源：https://selbie.wordpress.com/2011/01/23/scale-crop-and-center-an-image-with-correct-aspect-ratio-in-html-and-javascript/，我已经adepted它允许使用偏移量，以便在需要的位置裁剪任何图像。

它是如何工作
你创建你想要的任何大小的DIV。它可以是方形的，但是如果你想要一个像蛋一样的结果，那也可以工作（哈哈）。然后在其中插入任何未知尺寸的图像。

更改onload="OnImageLoad(event, 0, 30);与你想要的偏移量。用于向左或向下移动图像的正偏移，向上或向右为负。

注：我确实使用jQuery。