任意大小的CSS圆形图像 [英] CSS circular image at any size

问题描述

我正在使用CSS创建圆形图像.

I am creating a circular image with CSS.

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

When my image is 200px x 300px, it's not a perfect circle:

.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时，我需要使其处于一个完美的圆圈.

Is there a way to make a perfect circle when the width and height are different sizes? If I set this to 300 x 300 it's a perfect circle, but I need it to be in a perfect circle when the image is 200 x 300.

推荐答案

如果值不是正方形，那么就不能使其成为圆形，就这么简单.但是，如果将图像嵌套在其中，则可以使包装器为正方形，并隐藏圆的其余部分.会是这样的:

You can't make it a circle if the values aren't square, its that simple. You can, however, make the wrapper square and hide the remains of the circle if you nest your image in it. It would be something like this:

.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)选择器在单独的CSS定义中包装所有position:和transform:之间的行，因此居中仅在支持nth-child的浏览器上起作用，但这只是微调.

I usually wrap all the lines between and including position: and transform:in a separate CSS definition with the :nth-child(n)selector so the centering only works on browser that support nth-child, but thats just fine-tuning.

这篇关于任意大小的CSS圆形图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！