純粋なCSSを使用して画像を正方形に切り抜き、円に丸めますか？

Question

私は、さまざまなサイズとさまざまな形（いくつかの四角形、いくつかのsqaure、いくつかの肖像画、いくつかの風景）の画像から円を作りようとしています。イメージが正方形である場合clip-path: circle(50% at 50% 50%);またはborder-radius: 50%;を、それが真円、のみに画像を回す：私が使用している

に画像をトリミングする方法はありますその後、広場とは真円にするために、これらの方法のいずれかを使用します。

1. 純粋なCSSにを使用してを使用してwithou （画像のサイズは異なる場合があります） - （アスペクト比を失うことなく） - （両方ともborder-radiusまたはの場合）50％の比率を維持します。

ここで正方形の画像と長方形の画像を表示するためのコードスニペットです：

.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とエッジはまだ純粋なCSS使用してそれを行うための別の方法だclip-path

Answer 2

サポートしていません：

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を使用しました。