0
私はテイクオーバーに似たトップバナー広告を作成しようとしています。これには合計3つのdivが含まれています。左、右、中央。私はこれらの3つの画像を比例的にどのようにしてウィンドウのサイズを変更するときに画像が壊れないようにするのかと思います。3つのdivで分割された反応的なトップバナー画像
今、右のバナーの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>
ありがとうございました！これは私を助けました。 –
うれしい私は助けることができました！ – thepio