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

So my design includes two columns inside one row beside each other; one for a paragraph and the other for an image; the paragraph is usually bigger in height than the image. so how should I resize the image as the paragraph with also giving it a min height. (Ps. I'm using reactjs)

My code:

 <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>

CodePudding user response：

I'm no expert, but I've run into the same problem a while back. I would recommend you try setting the image as the div's background image and then resizing that.

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

CodePudding user response：

for first answer :

you can use a div tag instead of img tag.

    <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>

in style :

 .imgCol{
        height:100%;
    }
    .img{
        width:100%;
        height:100%;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

for second answer and I don't recommend :

<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%;
}