Question

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

Answer 1

我认为问题的根源在于您期望.img响应类会自动使您的图像对于较小的屏幕更小，而这并不是它的工作原理。

它实际应用max-width：100％;和身高：汽车;对于图像，即如果它是宽图像，它不会比它的父图像宽。 http://getbootstrap.com/css/#images

希望这有帮助

Answer 2

<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="hidden-xs" src="someimage.png">
<img class="visible-xs" src="someimagesmaller.png">
           </a> 
       </div> 
       <div class="col-xs-9 col-md-9"> 
           <ul class="nav navbar-nav navbar-right"> 
               <li><a href="#"><img class="hidden-xs" src="A1.png">
  <img class="visible-xs" src="A1smaller.png"></a></li> 
        <li><a href="#"><img class="img-responsive" src="A2.png"> </a></li> 
           </ul> 
       </div> 
     </div> 
   </nav>  `

Answer 3

使用bootstrap 4，有一些显示实用程序，可用于为不同的视口渲染不同的图像，

e.g。

<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="d-none d-sm-block" src="someimage.png"><!-- Image to show on screens from small to extra large -->
               <img class="d-sm-none" src="someimagesmaller.png"><!-- Image to show on extra small screen (mobile portrait) -->
           </a> 
       </div> 
     </div> 
</nav>

Answer 4

在Bootstrap版本4中，类“ .img响应”已更改为“ .img流体”。

Answer 5

使用class =＆＃34; img-responsive＆＃34;当您使用bootstrap css在移动设备或其他设备中打开时，它将缩小图像。但是对于你不工作，你可以检查你在标题中添加的正确链接。

Bootstrap图像调整为小屏幕调整大小，不起作用

5 个答案: