сдвигается картнка img

Question

хочу сделать на пол страницы так:

По своей логике : Основной блок - ширина 100%, высота 50vh

левый и правый дочерние - ширина 50%, а высота 100

2 дочерних правого блока - ширина 100% высота 50%

Вставляю картинки, получается такая шняга:

при изменении размера левой картинки, сдвигаются правые, но только вверх или вниз.

.flex-container {
  width: 100%;
    height: 50vh;
    display: table;
}

.leftImg {
    height: 50vh;
    display: table-cell;
    width:  50%;
    padding: 10px;

}



.rightImg{

    height: 50vh;
    width: 46%;
    display: table-cell;
    padding: 10px;
 
}

.leftImg img{
    height: 50vh;
    width: 100%;

}

.top img{
    height: 100%;
    width: 100%;
}

.bottom img{
    height: 100%;
    width: 100%;
}




.top, .bottom{
    width: 100%;
    height: 25vh ;
    /*height: 100%;*/

   }

.mountain{display: none;}

 .mountaintop{
    transition: 1s; /* Время эффекта */
 }

.mountaintop:hover {
    transform: scale(1.2); /* Увеличиваем масштаб */
 }

 .mountainbot{
    transition: 1s; /* Время эффекта */
 }

.mountainbot:hover {
    transform: scale(1.2); /* Увеличиваем масштаб */
 }

<div id="flex-container" class="flex-container">
            
                <div class="leftImg">
                    <img class="mountain w3-animate-left" src="img/background1.jpg">
                    <img class="mountain w3-animate-right" src="img/pole.jfif">
                    <img class="mountain w3-animate-left" src="img/yurta.jfif">
                    <img class="mountain w3-animate-right" src="img/tien-shan.jpg">
                    
                </div>

                <div class="rightImg">

                    <div class="top">
                        <img class="mountaintop" src="img/background1.jpg">
                    </div>
                
                    <div class="bottom">
                        <img class="mountainbot" src="img/background1.jpg">
                    </div>
                </div>
        </div>

Подскажите пожалуйста, в чем ошибка?

Answer 1

Можно короче - через grid

.flex-container {
  display: grid;
  grid-template: 1fr 1fr / 1fr 1fr;
  height: 50vh;
  grid-gap: 5px;
}

.mountain {
    grid-row: span 2;       
}

img {  
  width: 100%;
  height: 100%;
}

.mountaintop{
    transition: 1s; /* Время эффекта */
 }

.mountaintop:hover {
    transform: scale(1.2); /* Увеличиваем масштаб */
 }

 .mountainbot{
    transition: 1s; /* Время эффекта */
 }

.mountainbot:hover {
    transform: scale(1.2); /* Увеличиваем масштаб */
 }

<div id="flex-container" class="flex-container">                
    <img class="mountain" src="https://mediasat.info/wp-content/uploads/2019/02/internet.jpg">                                     
    <img class="mountaintop" src="https://mediasat.info/wp-content/uploads/2019/02/internet.jpg">
    <img class="mountainbot" src="https://mediasat.info/wp-content/uploads/2019/02/internet.jpg">
</div>

БЛОГ НА HUSL

сдвигается картнка img

Ответы (1 шт):