css - 如何使用flexbox缩小图像？

我在弄清楚如何使代码对移动设备友好时遇到了麻烦； PC版本看起来不错，但是在移动设备上，它会拉伸简历，并且某些文本会从页面上消失。我想不出一种方法来缩小图片在移动设备上显示时的尺寸，并将其内容很好地装在侧面。任何建议将不胜感激，并在此先感谢。

移动：



电脑：

div.readerone {
  display: flex;
  align-items: center;
}

p.right {
  border-radius: 5px!important;
  border: 1px ridge #AA9DE0;
  background-color: #E1E0FF;
  padding: 10px;
  margin-left: 20px;
}

<div class="readerone"><img src="https://image.ibb.co/fvO800/csongor-daniel-
    hs-10-14-2015-016.jpg" alt="csongor-daniel-hs-10-14-2015-016" width="210" height="300" border="0" />
  <p class="right">bio desc.</p>
</div>

最佳答案

您必须为子元素设置％width：

div.readerone {
  display: flex;
  align-items: center;
}

div.readerone img {
  width: 50%;
  object-fit: contain;
}

p.right {
  width: 50%;
  border-radius: 5px!important;
  border: 1px ridge #AA9DE0;
  background-color: #E1E0FF;
  padding: 10px;
  margin-left: 20px;
}

<div class="readerone"><img src="https://image.ibb.co/fvO800/csongor-daniel-
    hs-10-14-2015-016.jpg" alt="csongor-daniel-hs-10-14-2015-016" width="210" height="300" border="0" />
  <p class="right">bio desc.</p>
</div>

但是在移动设备上，您应该将图片移动到文字以下或以下，并且图片的宽度为100％，文字的宽度为100％：

div.readerone {
  display: flex;
  flex-direction: column;
}

关于css - 如何使用flexbox缩小图像？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/53121876/