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标签就可以做到这一点，就像使用＆＃34; background-image＆＃34;似乎弄乱了我的布局。

添加了一个小提琴： http://jsfiddle.net/jgt1qy7y/1/

Answer 1

您应将图像封装在父div中。

唯一的.img-circle做的是应用border-radius：50％;它将继承所选元素的宽度和高度。如果那些不相等，它将是一个椭圆形。在这种情况下，您将不得不定义尺寸，但随后图像将变形。这就是为什么你需要一个父div。设置宽度和高度，不要扭曲图像。

＆＃13;

.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%);
}

＆＃13;

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

＆＃13;

Answer 2

是的，就我所提供的信息而言，您可以设置图像标签的高度和宽度均为117px。这是您正在更改的IMG标记，因此每个图像都将延伸到该规范。

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

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

在此我设置了最大高度为117px，以便巨大的长度不会过火，但这会使它们在圆圈中变得很小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，我已经把它拿起来，因为我已经过去了...对不起，如果写得不好！

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

2 个答案: