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

Question

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

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

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

我有许多不同尺寸的相似图像正在使用：

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

这是有效的，除了我的图像最终被拉伸以适应圆圈，而不是仅仅从中裁剪。有什么简单的方法可以让它们裁剪和拉伸？

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

添加了一个小提琴： 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>

Answer 2

是的，据我可以从您提供的信息中回答，您将图像标签的高度和宽度设置为 117 像素。这是您要更改的 IMG 标签，因此每张图片都将被拉伸到该规范。

因此，您有两种选择： 1）您可以设置特定的宽度或高度，并允许圆圈为自动宽度或高度，例如

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

在这一点上，我设置了 117px 的最大高度，这样大长的就不会过火，但这会使它们在圆圈中变得很小http://jsfiddle.net/jgt1qy7y/8/

或者，其次，您可以创建一个固定宽度为 117px x 117px 的 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>

然后，您可以通过将 CSS 添加到 .img-circle 来设置背景图像的样式：

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

如果您希望图像完全符合您的要求，您必须检查在 javascript 中裁剪图像，但您得到了 jist。

免责声明：我从来没有从网站上正确地学习过 CSS，我是在学习过程中学会的……如果写得不好，请见谅！