所以我的設計在一行中包含兩列并排；一個用于段落，另一個用于影像；段落的高度通常比影像大。那么我應該如何將影像調整為段落的大小，同時給它一個最小高度。（Ps。我正在使用 reactjs 和 react Bootstrap）
我的代碼：
<Row className={[stylesParagraph.pardiv, stylesParagraph.bodyWidth]}>
<Col className={stylesParagraph.baseCol} xs={12} sm={12} md={12} lg={{span:12 , order:props.order}} xl={6} >
<div className={stylesParagraph.par}>
{/* <h2 className={ stylesParagraph.title}>{props.title}</h2> */}
<p className={stylesParagraph.paragraph}>{props.text}</p>
</div>
</Col>
<Col className={stylesParagraph.imgCol} xs={12} sm={12} md={12} lg={12} xl={6}>
<img
className={stylesParagraph.img}
src={props.img}
alt=""
/>
</Col>
</Row>
uj5u.com熱心網友回復：
我不是專家，但不久前我遇到了同樣的問題。我建議您嘗試將影像設定為 div 的背景影像，然后調整其大小。
div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-repeat: no-repeat;
background-size: 100% 100%;
}
uj5u.com熱心網友回復：
對于第一個答案：
您可以使用 div 標簽而不是 img 標簽。
<Col className={stylesParagraph.baseCol} xs={12} sm={12} md={12} lg={{span:12 , order:props.order}} xl={6} >
<div className={stylesParagraph.par}>
{/* <h2 className={ stylesParagraph.title}>{props.title}</h2> */}
<p className={stylesParagraph.paragraph}>{props.text}</p>
</div>
</Col>
<Col className={stylesParagraph.imgCol} xs={12} sm={12} md={12} lg={12} xl={6}>
<div
className={stylesParagraph.img}
style={{backgroundImage: `url(${props.img})`}}
/>
</Col>
</Row>
很有型 ：
.imgCol{
height:100%;
}
.img{
width:100%;
height:100%;
min-height:170px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
對于第二個答案，我不建議：
<Col className={stylesParagraph.baseCol} xs={12} sm={12} md={12} lg={{span:12 , order:props.order}} xl={6} >
<div className={stylesParagraph.par}>
{/* <h2 className={ stylesParagraph.title}>{props.title}</h2> */}
<p className={stylesParagraph.paragraph}>{props.text}</p>
</div>
</Col>
<Col className={stylesParagraph.imgCol} xs={12} sm={12} md={12} lg={12} xl={6}>
<img
className={stylesParagraph.img}
src={props.img}
alt=""
/>
</Col>
</Row>
.imgCol{
height:100%;
}
.img{
width:auto;
height:100%;
min-height:100%;
}
uj5u.com熱心網友回復：
如果你想使用，img那么你可以嘗試
<div className="container">
<div className="segment">
<img src="./image.jpg" alt="image.jpg" />
</div>
<div className="segment">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ea sint
totam quo nisi quaerat accusamus nemo modi ratione iste aut
delectus reprehenderit minima vero consequuntur nam officiis
voluptatum, doloremque voluptates.
</div>
</div>
.container {
display: flex;
height: 100vh;
width: 100%;
}
.segment {
width: 100%;
height: 60%;
}
img {
width: 100%;
height: 100%;
min-height: 50%;
object-fit: cover /* or use contain */;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/367644.html