如何让两个 div 占据较大 div 的高度

Question

所以我的设计包括一行中的两列并排；一个用于段落，另一个用于图像；段落的高度通常比图像高。那么我应该如何调整图像作为段落的大小，同时给它一个最小高度。（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>

Answer 1

第一个答案：

您可以使用 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%;
}

Answer 2

我不是专家，但我运行前阵子遇到过同样的问题。我建议您尝试将图像设置为 div 的背景图像，然后调整其大小。

  div {
  width: 100%; 
  height: 400px;
  background-image: url('img_flowers.jpg');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

Answer 3

如果你想使用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 */;
}

如何让两个 div 占据较大 div 的高度

How to make two divs take the height of the bigger div

html

css

styling

web

reactjs