html - 使用 Bootstrap 从矩形图像创建中心圆

Question

我将图像动态传递到 UI，它们可以按任意大小发送。然后我需要将它们缩放到特定大小，具体取决于图像将显示在哪个 img 标签中。这些图像需要是静态设置大小的圆圈，但不是椭圆形，当它们被裁剪时，我希望圆圈来 self 图像的中心。

我使用 boostrap 的 img-circle 创建了一个圆形图像:

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

我有许多不同尺寸的相似图像，它们使用:

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

这是有效的，除了我的图像最终被拉伸(stretch)以适合圆圈而不是仅仅从中裁剪。有什么简单的方法可以使它们裁剪或拉伸(stretch)吗？

我希望我可以只使用我的 img 标签来做到这一点，因为使用带有“背景图像”的东西似乎会弄乱我的布局。

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

Answer 1

您应该将您的图像包含在父 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>