如何使用响应图像编码半垂直页面

Question

我想模仿该网站的风格：https://www.washiarts.com/

我正在寻找一种放置照片而不是重复的背景图像的方法。总体视图应在左侧显示固定的响应照片，在右侧显示可压缩的内容。

我已经尝试了以下代码，但无法将图像缩放到整个div。

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