Multiple images height adjustment issue CSS

Question

I am making this blog where i want to have 4 pictures where i want three images on right to fit according to the one on the left. for example if left's height is 600 px the three have to be 200px each. But i am having this problem that images on right are getting out of bound.

On minimization:

HTML

{/*Left large image*/}

                    <div className='leftImage'>
                        <NavLink to={`/post/${nangaparbatStuff.slug}`}>
                            <img className='image' src={`${nangaparbatStuff.blogImage}`} alt=''/>
                        </NavLink>
                    </div>

                    {/* right side images */}

                    <div className='rightImage'>
                        <NavLink to={`/post/${saralStuff.slug}`}>
                            <img className='image' src={`${saralStuff.blogImage}`} alt=''/>
                        </NavLink>

                        <NavLink to={`/post/${chittakathaStuff.slug}`}>
                            <img className='image' src={`${chittakathaStuff.blogImage}`} alt=''/>
                        </NavLink>

                        <NavLink to={`/post/${sheosarStuff.slug}`}>
                            <img className='image' src={`${sheosarStuff.blogImage}`} alt=''/>
                        </NavLink>
                    </div>
                </div>

CSS

.leftImage {
      width: 70%;
      float: left;
  }
  .rightImage {
      width: 30%;
      float: right;

  }
.rightImage img{
    padding-left: 1px;
    padding-bottom: 1px;
    display: block;
}
  .image{
      width: 100%;
  }

Please guide. Thanks

Answer 1

Try this:

import React , { useEffect } from 'react';
import './try.scss';

const Trying = () => {
    useEffect(()=>{
        const cutRightImages = () => {
            let leftImageHeight = document.getElementsByClassName("leftImage")[0].offsetHeight;
            let cut = document.getElementsByClassName("cut");
            for(let i = 0; i < cut.length ; i++){
                cut[i].style.height = leftImageHeight / 3 + "px";
            }
        }
        cutRightImages();
        window.addEventListener('resize', cutRightImages);
    });
    return(
        <div>
            <div className="leftImageContainer">
                <img className="leftImage" src="https://miro.medium.com/max/3000/1*MI686k5sDQrISBM6L8pf5A.jpeg"/>
            </div>
            <div className="rightImages">
                <div className="cut">
                    <img className="image" src="https://miro.medium.com/max/3000/1*MI686k5sDQrISBM6L8pf5A.jpeg"/>
                </div>
                <div className="cut">
                    <img className="image" src="https://miro.medium.com/max/3000/1*MI686k5sDQrISBM6L8pf5A.jpeg"/>
                </div>
                <div className="cut">
                    <img className="image" src="https://miro.medium.com/max/3000/1*MI686k5sDQrISBM6L8pf5A.jpeg"/>
                </div>
            </div>
        </div>
    );
}
export default Trying;

CSS:

  .leftImageContainer{
    width:70%;
    float:left;
  }
  .leftImage{
      width:100%;
  }
  .rightImages{
    width:30%;
    float:right;
  }
  .image{
    width:100%;
  }
  .cut{
    overflow:hidden;
    width:100%;
    margin:0;
  }

Answer 2

Technically you solved the problem by asking the question. If you define a fixed height for your images, then the small images' height should be one third of the big one.

Now, if the width is also fixed at 70/30 ratio, your image could be re-dimentionned (distorded) depending on its size. To avoid this problem I recommend to put them into containers, fix the dimension of those containers, center the images vertically and horizontally, then overflow:hidden; the containers in order to crop the images.

That solution works if you accept your image to be croped instead of distorded. Either way you have to compromised (otherwise you'll have to use js to re-dimension everything)

.imgContainer{
  overflow:hidden;
  display:flex;
  justify-content:center;
  align-items:center;
  }

.imgContainer_right{
  width:30%;
  height:200px;
  float:right;
}

.imgContainer_left{
  width:70%;
  height:600px;
  float:left;
}