如何使用flexbox缩小图片?

时间:2018-11-02 15:53:12

标签: css image mobile flexbox shrink

我在弄清楚如何使代码对移动设备友好时遇到了麻烦; 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>

1 个答案:

答案 0 :(得分:0)

您必须为子元素设置%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;
}