CODEWITHSUNDEEP
htmlcssreactjswebstyling
Firas SCMP
Firas SCMP

Reputation: 541

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

enter image description hereSo 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 along side with react Bootstrap)

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>

Upvotes: 0

Views: 179

Answers (3)

Ameiz
Ameiz

Reputation: 706

If you want to use img then you can try

<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 */;
}

Upvotes: 1

Samira
Samira

Reputation: 2733

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%;
        min-height:170px;
        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%;
}

Upvotes: 0

T888
T888

Reputation: 79

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

Upvotes: 0

Related Questions