我试图使一个页面的一部分(关于我们),其中图片占用了屏幕的1/3和文字占用了其他2/3的空间在屏幕上的高度-91 vh.然而,图像是越来越超级放大,当我试图这样做,文字来它下面.
About.js
return (
<div id="about" className="style-about">
<div className="style-picture">
<img src={picture1}></img>
</div>
<div className="style-info">
<h1 className="style-about-heading"> About Us. </h1>
<div className="style-paragraph-container">
...//Content
</div>
</div>
</div>
)
}
about.css
.style-about {
background-color:#b2c5b2;
min-height: 91vh;
display: flex;
flex-wrap: wrap;
}
.style-picture {
flex: 1;
}
.style-info {
flex: 2;
padding-left: 20px;
}
1条答案
按热度按时间jdg4fx2g1#
您可以尝试以下CSS代码来调整图像的大小:
此外,您还可以调整.“style-picture”类的flex-basis属性来设置图像容器的宽度:
这应该给予你想要的布局与图像占用1/3的屏幕和文字占用其他2/3的空间。让我知道如果这有帮助!