Bootstrap - 3 列全响应式全高介绍页

Question

目前我正在为餐厅/酒店/葡萄园开发网站。我应该在一个介绍页面上连接 3 个独立的网站。

我想创建一个占满整个屏幕的介绍页面，并排 3 列，每列全高填充一张关于我想要 link 的每个站点的图片。

我是这样开始的：

Bootstrap 列：

<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

Bootstrap - 3 列全响应式全高介绍页

Bootstrap - 3 columns full responsive full height intro page

html

css

responsive-design

twitter-bootstrap-3