Как кодировать половину вертикальной страницы с адаптивным изображением

Question

Я хочу имитировать стиль на этом сайте: https://www.washiarts.com/

Я ищу способ разместить фотографию вместо повторяющегося фонового изображения. Общий вид должен представлять фиксированную отзывчивую фотографию слева и прокручиваемый контент справа.

Я уже пробовал следующий код, но он не масштабирует изображение до полного деления.

<div class="row no-gutters">

    <div class="col-md-6 no-gutters">
        <div class="leftside d-flex justify-content-center align-items-center">
            <img class="img-fluid img-full-size" src="static/img/photo.jpg">
        </div>
    </div>

    <div class="col-md-6 no-gutters">
        <div class="rightside d-flex justify-content-center align-items-center">
            <h1> Content goes here ... </h1>
        </div>
    </div>

</div>

.leftside, .rightside {
    height: 50vh;
    width: 100%;
}

.leftside_test {
    background-image: url('photo.jpg');
    background-size: 50%;
    background-repeat: repeat-y;
}

@media screen and (min-width:768px) {
    .leftside, .rightside {
        height: 100vh;
    }
}

.img-full-size {
    width: 100vh;
    height: 100vh;
}