jquery - 任意大小的 CSS 圆形图像

Question

我正在使用 CSS 创建一个圆形图像。

当我的图像是 200px x 300px 时，它不是一个完美的圆:

.circular {
  margin: auto;
  width: 200px;
  height: 300px;
  border-radius: 150px;
  -webkit-border-radius: 150px;
  -moz-border-radius: 150px;
  background: url(http://i.stack.imgur.com/S1ZCs.jpg) no-repeat;
}

<div class="circular"></div>

这是一个jsFiddle

有没有办法在宽高不同的情况下做一个完美的圆？如果我将其设置为 300 x 300，它就是一个完美的圆，但当图像为 200 x 300 时，我需要它处于一个完美的圆中。

Answer 1

如果值不是正方形，你就不能把它变成一个圆，就这么简单。但是，如果将图像嵌套在其中，则可以将 wrapper 设为正方形并隐藏圆圈的剩余部分。它会是这样的:

.circular {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
}
.circular img {
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

<div class="circular">
  <img src="http://www.placehold.it/150" />
</div>

我通常用 :nth-child(n)选择器，因此居中仅适用于支持第 nth-child 的浏览器，但这只是微调。