Вопрос регулировки высоты нескольких изображений CSS

Question

Я делаю этот блог, где я хочу иметь 4 изображения, где я хочу, чтобы три изображения справа помещались в соответствии с изображением слева. например, если высота слева равна 600 пикселей, то каждый из них должен быть размером 200 пикселей. Но у меня проблема с тем, что изображения справа выходят за рамки.

При минимизации:

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

Пожалуйста, руководство. Спасибо

Answer 1

Попробуйте:

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

Технически вы решили проблему, задав вопрос. Если вы определяете фиксированную высоту для своих изображений, то высота маленьких изображений должна составлять одну треть от большой.

Теперь, если ширина также зафиксирована в соотношении 70/30, ваше изображение может быть повторно -измеряется (искажается) в зависимости от его размера. Чтобы избежать этой проблемы, я рекомендую помещать их в контейнеры, фиксировать размеры этих контейнеров, центрировать изображения по вертикали и горизонтали, а затем переполнять: скрыто; контейнеры для того, чтобы обрезать изображения.

Это решение работает, если вы принимаете ваше изображение обрезанным, а не искаженным. В любом случае вам придется пойти на компромисс (в противном случае вам придется использовать js для изменения размеров всего)

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