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

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

有什么建议吗？

Answer 1

这是 @Alvaro Menendez 使用的 CSS 的优化版本，以避免相似元素的重复属性。

注意：background-position: top center; 也有细微的变化 -> 希望应该这样做。

HTML

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

CSS

html, body, div {height:100%;}
.col-md-4 {
    float:left;
    width:33.333333333%;
    background-size:cover;
}

.fill{
    height:100%;
    min-height:100%;
    background-repeat: no-repeat;
    background-position: top center; 
    background-color: #000000;    
}

.fill-hotel{
    background-image: url('http://upload.wikimedia.org/wikipedia/commons/2/28/Monarch_Butterfly_Danaus_plexippus_Vertical_Caterpillar_2000px.jpg');
}
.fill-res {
    background-image: url('http://upload.wikimedia.org/wikipedia/commons/0/07/Soyuz_TMA-02M_spacecraft_in_a_vertical_position.jpg');
}
.fill-wein {
    background-image: url('http://upload.wikimedia.org/wikipedia/commons/1/10/F-14A_VF-24_Vertical_Climb.JPEG');
}

Updated fiddle demo