將圖像裁剪爲正方形，然後使用純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。