我正在努力完成这样的事情:
当我使用Bootstrap时,我现在有这个:
<div class="col-md-3">
<div class="test">
<%= (image_tag("http://example.com.image.jpg", :class => "img-responsive")) %>
<h2>hello</h2>
</div>
</div>
</div>
CSS:
.test {
position: relative;
h2 {
background-color: #bebebe;
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
}
}
这适用于大屏幕和中型屏幕,但问题出在较小的屏幕上。在所有元素堆叠到一列后,问题会出现较小的图像。在较大的屏幕上,一行中有多个元素没有问题,文本显示在图像的底部。问题是一些图像在较小的屏幕上不够大,因为它们需要宽度为100%的屏幕而且它们只有300-400ox宽。 因为他们没有使用100%的屏幕,但标题确实使用了。
它看起来像这样:
**********************************
* *
* *
* Image *
* *
* *
********************************************
* Header *
********************************************
因此,标题一直传播到屏幕的左侧和右侧,并跳转到图像之外。无论屏幕尺寸如何,如何将标题保留在图像内?
谢谢!
答案 0 :(得分:2)
试试这个:
演示:http://jsfiddle.net/lotusgodkk/bm3mjhm1/
CSS:
.test {
position: relative;
display:inline-block; //Add display:inline-block; if it doesn't affect your code.
}
img {
max-width:100%;
}
h2 {
background-color: #bebebe;
position: absolute;
bottom: 0;
left: 0;
right:0; // Remove width:100% and add left,right offset.
}
HTML:
<div class="test">
<img src="http://lorempixel.com/400/200/sports/1/" />
<h2>Sample TExt. Sample TExt</h2>
</div>
在演示中查看不同尺寸的图像。
答案 1 :(得分:1)
有两种选择。第一个是答案,但这不是最好的主意。当视口变得非常小时,标题文本可以掩盖图像的大部分。当您查看演示时,第二行仅在500px最小宽度处对图像执行标题,并且在其下方,它堆叠,看起来非常好并且易于阅读。
<强> CSS 强>
.img-full-width {
width: 100%;
height: auto;
}
.caption {
position: relative;
margin-bottom: 2%;
}
.caption h3 {
margin: 0;
color: #fff;
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 10px;
background: rgba(41,82,123,.8);
font-size: 15px;
}
.caption-2 {
position: relative;
margin-bottom: 2%;
}
.caption-2 h3 {
margin: -1px 0 0 0;
color: #fff;
padding: 10px;
background: rgba(41,82,123,1);
font-size: 15px;
}
@media (min-width:500px) {
.caption-2 h3 {
margin:0;
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: rgba(41,82,123,.8);
}
}
<强> HTML 强>
<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="caption">
<img src="http://placekitten.com/g/400/300" class="img-full-width alt="" />
<h3>My Caption Goes Here</h3>
</div>
</div>
<div class="col-sm-4">
<div class="caption">
<img src="http://placekitten.com/g/400/300" class="img-full-width alt="" />
<h3>My Caption Goes Here</h3>
</div>
</div>
<div class="col-sm-4">
<div class="caption">
<img src="http://placekitten.com/g/400/300" class="img-full-width alt="" />
<h3>My Caption Goes Here</h3>
</div>
</div>
</div>
<hr>
<div class="row">
<div class="col-sm-4">
<div class="caption-2">
<img src="http://placekitten.com/g/400/300" class="img-full-width alt="" />
<h3>My Caption Goes Here</h3>
</div>
</div>
<div class="col-sm-4">
<div class="caption-2">
<img src="http://placekitten.com/g/400/300" class="img-full-width alt="" />
<h3>My Caption Goes Here</h3>
</div>
</div>
<div class="col-sm-4">
<div class="caption-2">
<img src="http://placekitten.com/g/400/300" class="img-full-width alt="" />
<h3>My Caption Goes Here</h3>
</div>
</div>
</div>