圆形展示图片

Question

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

谢谢。这是代码。

.headerOfBio {
  display: flex
}

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

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

    <div class="displayPic">

    </div>
  </div>

</div>

加上高度和宽度后变成这样：

Answer 1

提及 div 持有图像的宽度和高度，并将 border-radius 更改为 width/height 的一半。

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

Answer 2

与其将背景图片添加到 div，不如添加 img 标签会得到更好的结果。

.headerOfBio {
  display: flex;
}

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

<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>

Answer 3

你为什么使用flex:1？

试试这个...

.headerOfBio {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.displayPic {
  background: url("https://aeutas.org.au/wp-content/uploads/2014/12/people-icon.png") no-repeat;
  border-radius: 50%;
  height: 100px;
  width: 100px;
  border-radius : 50%;
}

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

圆形展示图片

Round Display Picture

html

css

flexbox

html-framework-7