Jay*_*Jay 5 resize image twitter-bootstrap
我正在尝试使用Bootstrap调整图像大小.我有一个足够大的徽标,适用于大屏幕和分辨率.显然,图像应该在所有分辨率(小和大分辨率)中都能很好地调整大小.我使用了Bootstrap的.img响应类来使图像响应.很明显,图像在大分辨率下显示得很好,但图像在较小的分辨率下会变小.问题是 - 图像在较小的分辨率下不会变小.任何帮助将受到高度赞赏.
<BODY>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header col-xs-3 col-md-3">
<a class="navbar-brand" href="#">
<img class="img-responsive" src="someimage.png">
</a>
</div>
<div class="col-xs-9 col-md-9">
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><img class="img-responsive" src="A1.png"></a></li>
<li><a href="#"><img class="img-responsive" src="A2.png"></a></li>
</ul>
</div>
</div>
</nav>
</BODY>
Run Code Online (Sandbox Code Playgroud)
我认为你问题的根源在于你期望.img响应类会自动使你的图像对于较小的屏幕变小,这并不是它的工作原理.
它实际上适用于max-width:100%; 和身高:汽车; 对于图像,即如果它是宽图像,它将不会比它的父图像宽.http://getbootstrap.com/css/#images
希望这可以帮助
归档时间: |
|
查看次数: |
17763 次 |
最近记录: |