将图像裁剪成正方形，然后使用纯CSS进行循环播放？

Question

我试图用不同大小和不同形状（一些矩形，一些方形，一些肖像，一些风景）的图像制作一个圆圈。

当我使用：clip-path: circle(50% at 50% 50%);或border-radius: 50%;时，它会将图像转换为完美的圆圈，仅如果图像为方形：

有没有办法将图像裁剪成正方形，然后使用其中一种方法使其成为一个完美的圆圈：

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

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

＆＃13;
＆＃13;
.clipped {
    clip-path: circle(50% at 50% 50%);
}
＆＃13;
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' />
＆＃13;
＆＃13;
＆＃13;

Answer 1

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

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

它似乎使用图像的较小边作为圆的圆周。

工作样本here。

适用于Chrome和FireFox。 IE和Edge仍然不支持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

好吧，花了我一会儿，但这就是我提出来的：

＆＃13;

＆＃13;

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

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

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

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

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

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

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

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

	return result;
}

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

	var img = evt.currentTarget;

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

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我从这个资源中完成了大部分工作：https://selbie.wordpress.com/2011/01/23/scale-crop-and-center-an-image-with-correct-aspect-ratio-in-html-and-javascript/并且我已准备好允许使用偏移量，以便您可以在所需位置裁剪任何图像。

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

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

注意：我确实使用了jQuery。