使用Bootstrap从矩形图像创建居中的圆形

Question

使用Bootstrap从矩形图像创建居中的圆形

3

我正在动态地向UI传递图像，它们可以是任何大小。然后，根据将显示该图像的img标签，我需要将它们缩放到特定的大小。这些图像需要是静态设置大小的圆形，而不是椭圆形，并且当它们被裁剪时，我希望圆形从我的图像中心出现。

我已经使用bootstrap的img-circle创建了一个圆形图像：

<img class="img-circle" src="image.jpg" width="117px" height="117px"/>

我有很多相似的不同尺寸的图片需要使用以下方式进行布局：

<div class="row" style="margin: -40px 10px 30px">

这个方法能够实现效果，但是我的图片会被拉伸以适应圆形而不是仅裁剪。有没有简单的方法可以让它们裁剪而不是拉伸？

我希望只使用我的img标签来实现这个效果，因为使用"background-image"似乎会破坏我的布局。

添加了一个fiddle： http://jsfiddle.net/jgt1qy7y/1/

- Fozefy

1

你能设置一个 fiddle 吗？ - Travis

我已经添加了一个fiddle。虽然这是我第一次创建，但如果有任何问题，请告诉我。 - Fozefy

这里是已更正引用Bootstrap CSS和JS链接的JSFiddle：https://jsfiddle.net/jgt1qy7y/10/ - Choma

@DanWhite 这些图片最初是矩形的。如果我只是尝试使用img-circle将它们变成圆形而不设置大小，它们就会变成椭圆形http://jsfiddle.net/oqpe8ppz/如果我能保证它们已经是正方形，那么这个方法就可以完美解决问题，但我不能这样保证。 - Fozefy

所以只需使用 @DannyVonHolten 提供的 CSS 规则 border-radius 作为答案即可。 - ggdx

显示剩余2条评论

2个回答

1

根据您提供的信息，我可以回答您的问题。您正在将图像标签的高度和宽度都设置为117像素。这是您要更改的IMG标签，因此每个图像都将被拉伸到该规格。

所以，您有两个选择： 1）您可以设置特定的宽度或高度，并允许圆形自动调整宽度或高度，例如：

.img-circle{
  width:auto;
  height:auto;
  width:117px;
  max-height:117px;
}

我已经设置了最大高度为117像素，以防止超长的内容过度延伸，但这将使它们在 http://jsfiddle.net/jgt1qy7y/8/ 中变得很小。

或者，第二种方法是创建一个宽度为117像素、高度为117像素的固定DIV（我假设您将其用作个人资料图片之类的东西），然后动态修改DIV的样式，添加背景图片，并在CSS中进行配置：

.img-circle{
    width:117px;
    height:117px;
}

对于您的div。然后，您可以动态地将图像的URL输出到div的STYLE中。

<div class="img-circle" style="background-image:url('echo your url here');"></div>

你可以通过在 .img-circle 中添加 CSS 样式来为背景图像设置样式：

.img-circle{
  background-size:contain/cover;
  background-repeat:no-repeat;
  backgrund-position:50% 50%;
}

如果您想让图片完全符合您的要求，您需要查看在JavaScript中裁剪图像的方法，但是您已经掌握了要点。

免责声明：我从未从网站上正式学习过CSS，我是在实践中学习的......如果写得不好，请见谅！

- xpx

哦，看起来上面的评论者比我更快地总结了一下，抱歉！ - xpx

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Danny van Holten · Accepted Answer

您应该将图像放在一个父div中。

.img-circle唯一的作用是应用border-radius: 50%;它将继承所选元素的宽度和高度。如果宽度和高度不相等，则会成为椭圆形。在这种情况下，您必须定义大小，但图像将变形。因此您需要一个父div来设置宽度和高度，以避免图像变形。

.img-circle {
    border-radius: 50%;
    position: relative;
    height: 117px;
    width: 117px;
    overflow: hidden;
   
    float: left;
    margin-right: 10px;
}

.img-circle.hor img {
    position: absolute;
    left: 50%;
    width: auto;
    height: 117px;
    transform: translateX(-50%);
 }

.img-circle.vert img {
    position: absolute;
    top: 50%;
    width: 117px;
    height: auto;
    transform: translateY(-50%);
}

    <div class="img-circle hor">
        <img src="http://placehold.it/350x150" />
    </div>

    <div class="img-circle vert">
        <img src="http://placehold.it/150x350" />
    </div>