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