如何在OnePengine主题的ET Text中为WordPress添加圆形图像

Question

我在Wordpress上使用OneEngine主题来创建一个关于我的部分。我想在我的网站上创建一个类似的部分。

到目前为止，我已经实现了这一目标。

使用代码：

<span><div id="about" class="row">
<span class="col-md-6">
<div class="img-circle">
<img src="http://placekitten.com/g/400/200" />
</div>
</span>
<span class="col-md-6">
<p>Hello :) Testing. </p> </span>
</div> </span>

我无法将图像显示为上面的圆圈。我尝试在ET Text中添加CSS并使用<div class="img-circle">，但这不起作用。

Answer 1

将以下代码添加到style.css

中

.img-circle img {
border-radius: 50%;
border: 2px solid;
}

Answer 2

您需要在img-circle标记上使用img，而不是在父元素div上使用<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> <div class="image"> <img class="img-circle" src="http://placehold.it/200x200" /> </div>。请记住对圆形图像使用相等宽度和高度的图像以避免失真。

＆＃13;

＆＃13;

Tasks.allow({
  insert: function () {
    return true;
  },
  remove: function () {
    return true;
  },
  update: function () {
    return true;
  },
});

＆＃13;

＆＃13;

＆＃13;

Answer 3

将img-circle类添加到img标记，而不是div标记。或者，定义类如：

.img-circle > img {
    border-radius: 50%;
}