html - 图像和文本并排在 div 中，想在调整大小时缩小图像

Question

我有一个 div，左边是图像，右边是一些文本。我正在使用 flexbox，这样当屏幕变窄时，文本会在图像下方弹出。

我希望在缩小屏幕时发生的不仅是文本变窄而且图像也缩小并保持其位置。取而代之的是文本缩小并且图像向下移动页面(保持相同大小)以保持居中。我怀疑这与 align-items: center 试图保持居中有关，但我删除了它然后图像只是拉伸(stretch)。

我该如何解决？

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

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

Answer 1

您可以使用内联样式将图像设为 background-image，即 style={{backgroundImage: Headshot}}

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