html - 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