Отзывчивое изображение верхнего баннера, разделенное на 3 divs

Я пытаюсь создать топ-баннер-объявление, напоминающее захват. Он содержит в общей сложности 3 div. Левый, правый и центр. Мне интересно, как я могу сделать эти 3 изображения пропорционально масштабируемыми, чтобы изображения не разбивались при изменении размера окна.Отзывчивое изображение верхнего баннера, разделенное на 3 divs

Прямо сейчас, мой правый баннер 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; вправо и влево баннеры сказать «не растут, вы можете сжать, вы должны стараться быть 180px в ширину». И центральный баннер должен заполнить все остальное.

Поддержка браузера для flexbox: http://caniuse.com/#search=flexbox

источник

2016-09-16 10:23:14 thepio

Спасибо! Это очень помогло мне. –

Рад, что я могу помочь! – thepio

Отзывчивое изображение верхнего баннера, разделенное на 3 divs

ответ

Смежные вопросы