如何在不破坏网格结构的情况下将响应大小的文本放在图像上？

Question

我在Bootstrap 3的基础上创建了一个由12个相等图像（400px x 400px）组成的响应网格，并在每个图像上添加了一个带有跨度的标题h2，只有在将鼠标悬停在图块上时才会出现。

问题在于，在较小的屏幕尺寸（宽度小于990px​​）上，文本不会响应地根据图像改变其大小并且突破网格结构。我创建了一个JS Bin用于演示目的：

http://jsbin.com/OdAfUqE/2/

非常感谢您对此的帮助。

HTML

<div class="row" id="service-wrapper">

    <div class="col-xs-6 col-sm-2 nopadding" >

        <a href="http://stackoverflow.com/">

            <h2><span>Lorem ipsum dolor</span></h2>

            <div><img src="../img/service1.jpg" class="img-responsive" alt="Responsive image"></div>

        </a>

    </div>

    <div class="col-xs-6 col-sm-2 nopadding">

        <a href="http://stackoverflow.com/">

            <h2><span>Lorem ipsum dolor</span></h2>

            <div><img src="../img/service2.jpg" class="img-responsive" alt="Responsive image"></div>

        </a>

    </div>

    <div class="col-xs-6 col-sm-2 nopadding">

        <a href="http://stackoverflow.com/">

            <h2><span>Lorem ipsum dolor</span></h2>

            <div><img src="../img/service3.jpg" class="img-responsive" alt="Responsive image"></div>

        </a>

    </div>

    <div class="col-xs-6 col-sm-2 nopadding">

        <a href="http://stackoverflow.com/">

            <h2><span>Lorem ipsum dolor</span></h2>

            <div><img src="../img/service4.jpg" class="img-responsive" alt="Responsive image"></div>

        </a>

    </div>

    <div class="col-xs-6 col-sm-2 nopadding">

        <a href="http://stackoverflow.com/">

            <h2><span>Lorem ipsum dolor</span></h2>

            <div><img src="../img/service5.jpg" class="img-responsive" alt="Responsive image"></div>

        </a>

    </div>

    <div class="col-xs-6 col-sm-2 nopadding">

        <a href="http://stackoverflow.com/">

            <h2><span>Lorem ipsum dolor</span></h2>

            <div><img src="../img/service6.jpg" class="img-responsive" alt="Responsive image"></div>

        </a>

    </div>

</div>


<div class="row" id="service-wrapper">

<div class="col-xs-6 col-sm-2 nopadding" >

        <a href="http://stackoverflow.com/">

            <h2><span>Lorem ipsum dolor</span></h2>

            <div><img src="../img/service7.jpg" class="img-responsive" alt="Responsive image"></div>

        </a>

    </div>

    <div class="col-xs-6 col-sm-2 nopadding">

        <a href="http://stackoverflow.com/">

            <h2><span>Lorem ipsum dolor</span></h2>

            <div><img src="../img/service8.jpg" class="img-responsive" alt="Responsive image"></div>

        </a>

    </div>

    <div class="col-xs-6 col-sm-2 nopadding">

        <a href="http://stackoverflow.com/">

            <h2><span>Lorem ipsum dolor</span></h2>

            <div><img src="../img/service9.jpg" class="img-responsive" alt="Responsive image"></div>

        </a>

    </div>

    <div class="col-xs-6 col-sm-2 nopadding">

        <a href="http://stackoverflow.com/">

            <h2><span>Lorem ipsum dolor</span></h2>

            <div><img src="../img/service10.jpg" class="img-responsive" alt="Responsive image"></div>

        </a>

    </div>

    <div class="col-xs-6 col-sm-2 nopadding">

        <a href="http://stackoverflow.com/">

            <h2><span>Lorem ipsum dolor</span></h2>

            <div><img src="../img/service11.jpg" class="img-responsive" alt="Responsive image"></div>

        </a>

    </div>

    <div class="col-xs-6 col-sm-2 nopadding">

        <a href="http://stackoverflow.com/">

            <h2><span>Lorem ipsum dolor</span></h2>

            <div><img src="../img/service12.jpg" class="img-responsive" alt="Responsive image"></div>

        </a>

    </div>

</div>

CSS：

.nopadding {
padding-left:0;
padding-right:0;
}

.row {
margin: 0;
}

#service-wrapper img {
width: 100%;
}

#service-wrapper {
position: relative;
/*display: block;*/
}

#service-wrapper h2 {
opacity: 0;
filter: alpha(opacity=0);
line-height: 1.2;

position: absolute;

font-weight: 400;
width: 100%;
height: 100%;
background: #0066FF;
color: #000;
padding: 0;
margin-top:0px;
text-align: center;
vertical-align: middle;

-webkit-transition: opacity .2s linear;
-moz-transition: opacity .2s linear;
-o-transition: opacity .2s linear;
transition: opacity .2s linear;    
}

service-wrapper h2 span {
display: block;

padding: 10px;

color: white; 
font: bold 24px/45px Helvetica, Sans-Serif;
letter-spacing: -1px;  
background: rgb(0, 0, 0); /* fallback color */
background: rgba(0, 0, 0, 0.7);    
}

#service-wrapper a:hover h2 {
opacity: 1;
filter: alpha(opacity=100);
cursor: pointer;
}

Answer 1

尝试使用媒体查询调整字体大小和/或填充？

Answer 2

要控制字体大小，请使用媒体查询：http://css-tricks.com/snippets/css/media-queries-for-standard-devices/。设置一些断点（320,480,540,768或其他任何你想要的）并降低每个断点的字体大小。 另外，在font-size上使用em单元，并将line-height重置为normal。