圆形显示图片

Question

我正在创建一个包含主屏幕的应用程序。这将有一个客户的传记。我试图创建一个标题，其中包括标题和圆形显示图像。从代码中我使用了3个div，它将包含包装器，标题和图片。我完成了显示：flex将使它们在1行中，并且flex：1将图像向右移动。当做半径50％时，它会压缩照片。你能救我一下吗？

感谢。这是代码。

＆＃13;

＆＃13;

.headerOfBio {
  display: flex
}

.displayPic {
  flex: 1 background-image: url("../images/displayPicture.jpg") border-radius: 50%
}

＆＃13;

<div class="quote titleBio">
  <div class="headerOfBio">
    <h3>
      MEET THE <span class="diffColor">FOUNDER</span>
    </h3>

    <div class="displayPic">

    </div>
  </div>

</div>

＆＃13;

＆＃13;

＆＃13;

添加高度和宽度后，它变成如下：

Answer 1

提及包含图像的div的宽度，高度，并将border-radius更改为宽度/高度的一半。

.displayPic{
    flex: 1
    background-image: url("../images/displayPicture.jpg")
    width: 300px;
    height: 300px;
    border-radius: 150px;
 }

Answer 2

添加img标记可以提供更好的结果，而不是将背景图像添加到div中。

＆＃13;

＆＃13;

.headerOfBio {
  display: flex;
}

.displayPic img {
  flex: 1; 
  width:50%;
  border-radius:100%
}

＆＃13;

<div class="quote titleBio">
  <div class="headerOfBio">
    <h3>
      MEET THE <span class="diffColor">FOUNDER</span>
    </h3>

    <div class="displayPic">
      <img src="https://placeimg.com/250/250/nature" /> 
    </div>
  </div>

</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

为什么使用flex：1？

试试这个......

floatval($row[0])

https://jsfiddle.net/cd3czf30/1/