css - 如何使用响应式图像编写半垂直页面

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

标签： csstwitter-bootstrapbootstrap-4