我正在尝试使用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>
最佳答案
我认为问题的根源在于,您期望.img响应类将自动为较小的屏幕缩小图像,而这并不是它的工作原理。
它实际上适用最大宽度:100%;和高度:自动;图像,即如果图像较宽,则不会比其父图像宽。 http://getbootstrap.com/css/#images
希望这可以帮助