Question

我想拍摄一张图片（它应该适用于正方形或矩形）并将其制作成固定大小的圆圈。现在，我使用Bootstrap的img-circle类和我自己的CSS。这是我自己的CSS：

from distutils.core import setup
from distutils.extension import Extension

setup(
    name="myPy",
    ext_modules = [Extension(
        "MyPyExt",
        ["MyPyExt.cpp"],
        libraries = ["boost_python"],
        extra_compile_args = ["-g0"]
        )]
    )

然而，它正在拍摄一张矩形图像并挤压它，弄乱了比例。

Answer 1

要对矩形图像执行此操作，您应该在img周围创建一个包装器，然后将.img-circle类放在包装器上。这样，您可以将圆圈内的图像重新定位到您想要的任何位置（在下面的示例中水平居中）。

＆＃13;

.circle-img {
  width: 250px;
  height: 250px;
  overflow: hidden;
}

.circle-img img {
  height: 100%;
  transform: translateX(-50%);
  margin-left: 50%;
}

＆＃13;

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="circle-img img-circle">
  <img src="http://www.servingsushi.com/images/header/photo_1_1.jpg" >
</div>

＆＃13;

没有包装器就无法工作，因为圆圈是通过对图像边缘进行舍入而创建的，并且图像不会超出其自身的边缘。因此，您最终会得到一个椭圆形或压扁的图像。

Answer 2

替代img-circle也很有效：

<div class="circle-img rounded-circle"> <img src="http://www.servingsushi.com/images/header/photo_1_1.jpg" > </div>

Bootstrap的img-circle css类将我的图像调整为不同的比例

2 个答案: