除以 3 个 div 的响应式顶部横幅图片

Question

我正在尝试制作类似于收购的顶级横幅广告。一共包含3个div。左，右和一个中心。我想知道如何使这 3 张图像按比例缩放，以便在调整 window.

大小时图像不会中断

现在，在调整 window 大小时，我的右侧横幅 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>

Answer 1

您可以使用 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; 设置为右侧和左侧横幅，表示 "do not grow, you can shrink, you should try to be 180px wide"。中心横幅应填写其余部分。

浏览器对 flexbox 的支持：http://caniuse.com/#search=flexbox

除以 3 个 div 的响应式顶部横幅图片

Responsive top-banner image that's devided by 3 divs

html

css

banner

banner-ads