如何在不破坏网格结构的情况下，对图像进行响应大小调整？
如何在不破坏网格结构的情况下，对图像进行响应大小调整？
提问于 2013-12-17 15:13:36
我在Bootstrap 3的基础上创建了一个由12个相等图像(400px400px)组成的响应网格，并在每个图像上添加了一个标题h2，只有在平铺上盘旋时才会出现。
问题是，在较小的屏幕大小(宽度小于990 of )上，文本没有响应地按照图像更改其大小，并且正在突破网格结构。为了演示目的，我创建了一个JS：
http://jsbin.com/OdAfUqE/2/
希望你能在这方面提供帮助。
<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;
}回答 2
Stack Overflow用户
回答已采纳
发布于 2013-12-17 15:38:14
要控制字体大小，请使用媒体查询：http://css-tricks.com/snippets/css/media-queries-for-standard-devices/。设置一些断点(320,480,540,768或任何你想要的)并降低字体大小。此外，在字体大小上使用em单元，并将线条高度重置为正常。
Stack Overflow用户
发布于 2013-12-17 15:31:22
尝试调整字体大小和/或填充媒体查询？
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/20637751
复制相关文章
相似问题
腾讯云开发者
