[英]column images full width responsive
我正在尝试使2张图像占据2列的全宽。 我希望图像能够响应。 这似乎应该很简单,但是我有问题。 我对将宽度应用于容器,行或使用表感到困惑。 我希望它看起来像该站点上轮播下的前2个输入框减去动画翻转。 http://www.montere.it/?lang=zh-CN
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="trans"> <img src="headertrans.jpg">
h3>The Latest</h3>
<p>From apartments and rooms to treehouses and boats: stay in unique spaces in 192 countries.</p>
<p><a href="#">See how to travel on Airbnb</a></p>
</div>
</div>
<div class="col-md-6">
<div class="trans"> <img src="headertrans2.jpg">
<h3>Designs</h3>
<p>Renting out your unused space could pay your bills or fund your next vacation.</p>
<p><a href="#">Learn more about hosting</a></p>
</div>
</div>
我的CSS:
.container {width:100%; }
.trans {过渡:。所有0.9秒轻松;
}
.trans:hover {opacity:0.1;
}
由于您似乎正在使用Bootstrap,因此需要执行类似的操作。
的HTML
<div class="container-fluid">
<div class="row">
<div class="col-xs-6 text-center box left">
<h3>The Latest</h3>
<p>From apartments and rooms to treehouses and boats: stay in unique spaces in 192 countries.</p>
<p><a href="#">See how to travel on Airbnb</a>
</p>
</div>
<div class="col-xs-6 text-center box right">
<h3>Designs</h3>
<p>Renting out your unused space could pay your bills or fund your next vacation.</p>
<p><a href="#">Learn more about hosting</a>
</p>
</div>
</div>
</div>
的CSS
.box{min-height:200px;}
.left{background:url("http://cdn.cutestpaw.com/wp-content/uploads/2012/07/l-Wittle-puppy-yawning.jpg"); background-size:cover}
.right{background:url("http://cdn.cutestpaw.com/wp-content/uploads/2012/07/l-Wittle-puppy-yawning.jpg"); background-size:cover}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.