Question

我有一个div，左边有一个图像，右边有一些文字。我正在使用flexbox，因此当屏幕缩小时，文本会弹出图像下方。

我希望在缩小屏幕时发生的不仅是文字狭窄而且图像缩小并保持其位置。相反，正在发生的事情是文本缩小，图像向下移动（保持相同的大小）以保持居中。我怀疑这与试图保持居中的align-items: center有关，但我删除了那个图像只是拉伸。

我该如何解决？

＆＃13;

.bio {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  flex-direction: row;
  width: 80%;
  margin: auto;
  margin-bottom: 30px;
  align-items: center;
}

.bio-text {
  flex: 200px;
}

.bio-text p {
  line-height: 25px;
  font-family: "Nunito sans", sans-serif;
}

.bio-h3-container {
  text-align: center;
}

.headshot {
  max-width: 100%;
  height: auto;
  margin-left: 40px;
  margin-right: 40px;
}

＆＃13;

<div className="bio">
  <img className="headshot" src={Headshot} />
  <div className="bio-text">
    <div className="bio-h3-container">
      <h3>Bio</h3>
    </div>
    <p>...bunch of text here...</p>
  </div>
</div>

＆＃13;

Answer 1

您可以使用内嵌样式（background-image

将图片设为style={{backgroundImage: Headshot}}

然后将css类background-size: contain放在上面。这应该使图像调整大小到div

Answer 2

您需要更改

.bio {flex-wrap: wrap;}

到

.bio {flex-wrap: nowrap;}

您可能还需要将图像放在div中，并将最大宽度定义为100％

div中并排显示图片和文字，希望缩小图片大小

2 个答案: