响应式图像上的Bootstrap和文本

时间:2014-10-21 04:56:05

标签: css css3 twitter-bootstrap twitter-bootstrap-3

我正在努力完成这样的事情:

enter image description here

当我使用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                    *
********************************************

因此,标题一直传播到屏幕的左侧和右侧,并跳转到图像之外。无论屏幕尺寸如何,如何将标题保留在图像内?

谢谢!

2 个答案:

答案 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)

DEMO:http://jsbin.com/nobape

enter image description here

有两种选择。第一个是答案,但这不是最好的主意。当视口变得非常小时,标题文本可以掩盖图像的大部分。当您查看演示时,第二行仅在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>