Bootstrap - 3列完整响应全高度介绍页面

Question

目前，我正在开设一家餐厅/酒店/葡萄园的网站。我想在一个介绍页面上连接3个独立的网站。

我想创建一个填充整个屏幕的介绍页面，并排放置3列，每个列的全高度都填充了我想要链接的每个站点的图片。

我开始这样做了：

引导列：

<div class="row intro-div no-gutters">
    <div class="col-md-4 fill-res"></div>
    <div class="col-md-4 fill-wein"></div>
    <div class="col-md-4 fill-hotel"></div>
</div>

CSS：

.fill-hotel{
    height:100%;
    min-height:100%;
    background-image: url('../images/intro-hotel.jpg');
    background-repeat: no-repeat;
    background-position: top center; 
    background-color: #000000;
}

它在我的屏幕上看起来很棒，当我改变浏览器的大小时，它会响应，但它会改变图片的部分。例如，如果图片中有一个头部，当我使用更大的屏幕时，头部将在小屏幕上被裁剪。

有什么建议吗？