html - 如何在不破坏网格结构的情况下在图像上放置响应式调整大小的文本？

Question

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

问题在于，在较小的屏幕尺寸(宽度小于 990 像素)上，文本不会根据图像相应地更改其大小，并且会脱离网格结构。我创建了一个 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

要控制字体大小，请使用媒体查询:http://css-tricks.com/snippets/css/media-queries-for-standard-devices/ .设置一些断点(320、480、540、768 或任何你想要的)并降低每个断点的字体大小。此外，在字体大小上使用 em 单位，并将行高重置为正常值。