Bootstrap - 3列全響應全高介紹頁面

目前我正在爲一家餐廳/酒店/葡萄園的網站工作。應該有3個獨立的網站，我想在一個介紹頁面上連接。Bootstrap - 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; 
}

它看起來我的屏幕上偉大的，當我改變我的瀏覽器的大小反應靈敏，但它改變了圖片的部分。例如，如果圖片中有頭部，當我使用較大的屏幕時，頭部會在小屏幕上裁剪。

有什麼建議嗎？

來源

2015-04-18 DISbeat

如果它是一個選項，你可以嘗試使用響應圖像（HTTP：// getbootstrap。 com/css /＃images）而不是背景圖片... – ochi

恩，可能有幫助，但問題是，人們有不同的屏幕寬高比..所以我不能計算圖像大小： -/ – DISbeat

那麼，使用'background-size：cover'會是一個解決方案嗎？ http://jsfiddle.net/alvaromenendez/Lv6r8tzv/ –

這是@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

來源

2015-04-29 20:08:08 ochi

謝謝！ :-)我剛剛刪除了「html，body」，導致它無法正常工作。 – DISbeat

Bootstrap - 3列全響應全高介紹頁面

回答

相關問題