我正在尝试使用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

希望这可以帮助

08-25 21:30
查看更多