引导-3列全响应全高度介绍页

Question

目前，我正在为一家餐馆/酒店/葡萄园网站工作。有三个独立的网站，我想连接在一个介绍页面。

我想要创建一个介绍页面，填充全屏幕，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; ->也有一个微小的变化，希望它能做到这一点。

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

更新小提琴演示