按3格劃分的響應式頂級橫幅圖像

我正在嘗試創建類似於收購的頂級橫幅廣告。它包含總共3個div。左，右和中心。我想知道如何讓這3個圖像按比例縮放，以便在調整窗口大小時不會中斷圖像。按3格劃分的響應式頂級橫幅圖像

現在，我調整窗口的大小時，我的右側橫幅div似乎被推到正確的中間div下面，因此它沒有響應。

*注意：我用背景色替換了圖像。這裏是什麼，我想實現一個例子： http://fandango.no/wp-content/uploads/2015/09/1412_hestesko_cruise_ncl_skisse02.jpg

<style> 
 
    * body, html{ 
 
    margin: 0; 
 
    padding: 0; 
 
    } 
 
    .left-banner{ 
 
    background-color:lightgreen; 
 
    background-repeat: no-repeat; 
 
    width:100%; 
 
    height:700px; 
 
    max-width:180px; 
 
    float: left; 
 

 
    } 
 
    .right-banner{ 
 
    background-color:lightgreen; 
 
    background-repeat: no-repeat; 
 
    width:100%; 
 
    height:700px; 
 
    max-width:180px; 
 
    float:left; 
 
    } 
 
    .center-banner{ 
 
    background-color:lightblue; 
 
    background-repeat: no-repeat; 
 
    width:100%; 
 
    max-width:1010px; 
 
    height:150px; 
 
    float:left; 
 
    } 
 
    .banner-container{ 
 
    width:100%; 
 
    height:100%; 
 
    } 
 
</style>

<!doctype html> 
 
<html lang="en"> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <title>TEST</title> 
 
    <meta name="description" content="X"> 
 
    <meta name="author" content="X"> 
 
    </head> 
 
    
 
    <body> 
 
    <div class="banner-container"> 
 
     <div class="left-banner"></div> 
 
     <div class="center-banner"></div> 
 
     <div class="right-banner"></div> 
 
    </div> 
 
    </body> 
 
</html>

感謝

我設法得到這個工作由於下面的答案。中央橫幅現在是流動的，同時保持左右橫幅寬度相同。

.left-banner{ 
 
    background-color: lightgreen; 
 
    background-repeat: no-repeat; 
 
    height:700px; 
 
    flex: 0 0 180px; 
 
    } 
 
    .right-banner{ 
 
    background-color: lightgreen; 
 
    background-repeat: no-repeat; 
 
    height:700px; 
 
    flex: 0 0 180px; 
 
    } 
 
    .center-banner{ 
 
    background-color: lightblue; 
 
    background-repeat: no-repeat; 
 
    background-size: 100% 100%; 
 
    max-width:1010px; 
 
    height:150px; 
 
    flex: 0 1 100%; 
 
    } 
 
    .banner-container{ 
 
    width:100%; 
 
    height:100%; 
 
    display: flex; 
 
    flex-wrap:nowrap; 
 
    }

<html> 
 
    <body> 
 
    <div class="banner-container"> 
 
     <div class="left-banner"></div> 
 
     <div class="center-banner"></div> 
 
     <div class="right-banner"></div> 
 
    </div> 
 
    </body> 
 
</html>

來源

2016-09-16 Mister T

你可以使用Flexbox的做到這一點。

* body, 
 
html { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.left-banner { 
 
    background-color: lightgreen; 
 
    background-repeat: no-repeat; 
 
    flex: 0 1 180px; 
 
    height: 700px; 
 
} 
 
.right-banner { 
 
    background-color: lightgreen; 
 
    background-repeat: no-repeat; 
 
    flex: 0 1 180px; 
 
    height: 700px; 
 
} 
 
.center-banner { 
 
    background-color: lightblue; 
 
    background-repeat: no-repeat; 
 
    flex: 0 1 100%; 
 
    height: 150px; 
 
    max-width: 1010px; 
 
} 
 
.banner-container { 
 
    width: 100%; 
 
    height: 100%; 
 
    display: flex; 
 
    flex-wrap: 
 
}

<div class="banner-container"> 
 
    <div class="left-banner"></div> 
 
    <div class="center-banner"></div> 
 
    <div class="right-banner"></div> 
 
</div>

基本上你設置flex: 0 1 180px;到右側和左側的橫幅說「不長，還可以收縮，你應該儘量寬180像素」。其餘的中心橫幅應該填寫。

對flexbox的瀏覽器支持：http://caniuse.com/#search=flexbox

來源

2016-09-16 10:23:14 thepio

謝謝！這幫了我很多。 –

很高興能幫到你！ – thepio

按3格劃分的響應式頂級橫幅圖像

回答

相關問題