div中并排的图像和文本，想要在调整大小时缩小图像答案

【问题标题】：Image and text side by side in div, want to shrink image on resizediv中并排的图像和文本，想要在调整大小时缩小图像
【发布时间】：2018-08-25 20:41:10
【问题描述】：

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

我希望缩小屏幕时不仅要缩小文本，还要缩小图像并保持其位置。相反，正在发生的是文本缩小并且图像在页面上向下移动（保持相同大小）以保持居中。我怀疑这与 align-items: center 试图保持居中有关，但我删除了它，然后图像只是拉伸了。

我该如何解决？

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

【问题讨论】：

标签： html css reactjs responsive-design flexbox

【解决方案1】：

你需要改变

.bio {flex-wrap: wrap;}

到

.bio {flex-wrap: nowrap;}

您可能还需要将图像放在一个 div 中，并将除 max 以外的宽度定义为 100%

【讨论】：

不幸的是，当我将其设置为 nowrap 时，文本不会在调整大小时低于图像。

【解决方案2】：

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

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

【讨论】：

感谢您的回复！我试过这个，不幸的是它不能解决随着屏幕变窄图像仍然在页面上向下移动的问题。
如果您还没有解决这个问题，您是否尝试过将justify-content 设置为start？