问题描述
我正在尝试创建一个包含2个全高列的简单着陆页，其中一列由响应图像幻灯片组成。 我知道，由于页面被分成两半，因此我需要的图像要比宽的图像高（这不是问题）。 此外，我还希望内容（文本等）也垂直位于列的中心。
到目前为止，我已经实现的工作是创建两列，内容居中，但列上的图像幻灯片显示不正确，因为它没有初始化为覆盖整个列的全尺寸背景，因此我没有知道如何解决这个问题。
的CSS
body {
background-color:#ccc;
}
.slider_container img {
-webkit-background-size: 100% auto;
-moz-background-size: 100% auto;
-o-background-size: 100% auto;
background-size: 100% auto;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
display:none;
visibility: visible;
overflow: hidden;
z-index:10;
position: fixed;
}
.vcenter {
min-height: 100%;
/* Fallback for vh unit */
min-height: 100vh;
/* You might also want to use
'height' property instead.
Note that for percentage values of
'height' or 'min-height' properties,
the 'height' of the parent element
should be specified explicitly.
In this case the parent of '.vertical-center'
is the <body> element */
/* Make it a flex container */
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
/* Align the bootstrap's container vertically */
-webkit-box-align : center;
-webkit-align-items : center;
-moz-box-align : center;
-ms-flex-align : center;
align-items : center;
/* In legacy web browsers such as Firefox 9
we need to specify the width of the flex container */
width: 100%;
/* Also 'margin: 0 auto' doesn't have any effect on flex items in such web browsers
hence the bootstrap's container won't be aligned to the center anymore.
Therefore, we should use the following declarations to get it centered again */
-webkit-box-pack : center;
-moz-box-pack : center;
-ms-flex-pack : center;
-webkit-justify-content : center;
justify-content : center;
}
的HTML
<div class="row">
<div class="vcenter">
<div class="col-xs-6">
<h1>This is a split page</h1>
</div>
<div class="col-xs-6 slider_container">
<h1>This is a image slide</h1>
<img src="http://www.h3dwallpapers.com/wp-content/uploads/2014/09/Tall_building-8.jpg" />
<img src="http://kuaibozz.com/wp-content/uploads/2015/03/tall-building-amazing-ideas-1-on-building-simple-home-design.jpg" />
</div>
</div>
</div>
小提琴： :
1楼
jaunt
0
已采纳
2015-07-25 11:15:57
就个人而言，我将使用其他方法来创建列。 有一个实际的列属性可以像这样使用：
html,body,.row{ height:100%; margin:0; padding:0; } .row{ -webkit-columns: 2; /* Chrome, Safari, Opera */ -moz-columns: 2; /* Firefox */ columns: 2; overflow-x: hidden; /*to remove some weird horizontal spacing after the element*/ } @media (max-width:700px){ .row{ -webkit-columns: 1; /* Chrome, Safari, Opera */ -moz-columns: 1; /* Firefox */ columns: 1; } } .row div{ height:100%; position:relative; } .row div p{ padding:0; margin:0; position:relative; top:50%; transform:translateY(-50%); text-align:center; z-index:2; } .row div img{ width: auto; min-width:100%; max-height: 100%; position:absolute; top:0; left:0; }
<div class="row"> <div> <p>Content left</p> </div> <div class="slider"> <p>Content right</p> <img src="http://www.h3dwallpapers.com/wp-content/uploads/2014/09/Tall_building-8.jpg" /> <img src="http://kuaibozz.com/wp-content/uploads/2015/03/tall-building-amazing-ideas-1-on-building-simple-home-design.jpg" /> </div> </div>
我以为.slider是Bootstrap之类的东西，所以我把它.slider了，不管我确定您可以从这里弄清楚如何进行更改。
希望这可以帮助！