小屏幕的引导图像调整大小，不起作用答案

【问题标题】：Bootstrap image resize for small screen, not working小屏幕的引导图像调整大小，不起作用
【发布时间】：2014-09-01 21:36:03
【问题描述】：

我正在尝试使用 Bootstrap 调整图像大小。我有一个足够大的标志，用于大屏幕和分辨率。显然，图像应该在所有分辨率（小分辨率和大分辨率）下都可以很好地调整大小。我使用了 Bootstrap 的 .img-responsive 类来使图像具有响应性。很明显，图像在大分辨率下显示良好，但图像在较小分辨率下应该变小。问题是 - 图像在较小的分辨率下并没有变小。任何帮助将不胜感激。

<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标签放在任何你喜欢的地方，一个NAV或者DIV（容器），结果应该是一样的。
我猜你的问题出在父元素上。请为我们提供一些代码或更好地为您的问题创建一个示例引导程序。没有这个，就很难为您提供帮助。
你也可以在这里查看enterhelix.com/new 所以你可以看到图像没有随着分辨率缩小或扩大。它们始终保持不变。
下次请通过edit 函数将您的代码添加到您的问题中。我尝试了您的示例代码，它对我来说很好（bootply.com/TmSwClXC1Y）。您的问题似乎出在其他地方。
那么问题出在哪里？徽标在您的 enterhelix.com/new 网站上为我完美调整大小..

标签： image twitter-bootstrap resize

【解决方案1】：

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

它实际上应用了 max-width: 100%;和高度：自动；到图像，即如果它是宽图像，它不会比其父图像更宽。 http://getbootstrap.com/css/#images

希望对你有帮助

【讨论】：

是的，这正是我所期望的。那么，为了缩小分辨率以适应较小的分辨率，我该怎么办？我是否必须使用自己的媒体查询，即不同分辨率的不同图像。
@user2554706，是的，媒体查询是一种选择。挑战可能是随着引导网格的变化或折叠，图像父级的宽度会发生变化，因此您需要多个规则来允许窗口或视口宽度以及图像的细节。如果对你有用的话，我想了一个主意：codepen.io/panchroma/pen/DxzJA ...祝你好运！
是的，这正是我的想法。我必须编写多个规则。我想知道，Bootstrap 如此受欢迎，为什么他们没有解决这个非常常见的问题。感谢您的帮助。
你能回答这个问题吗stackoverflow.com/questions/24709760/…
@user2554706 > 为什么他们没有解决这个非常常见的问题？ .. Bootstrap 可以节省大量时间，但它不是镇上唯一的马。还有许多其他不错的选择，它们都有自己的优势和差异，您可能更喜欢其中一个。如果您还没有，您可以查看其他一些是 foundation.zurb.com 或 getskeleton.com 。他们都很好;)

【解决方案2】：

使用 class="img-responsive" 当您使用引导 css 在移动设备或其他设备中打开时，它会缩小图像。但对你来说它不起作用，你可以检查你在标题中添加的正确链接。

【讨论】：

【解决方案3】：

<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>  `

【讨论】：

【解决方案4】：

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

例如

<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>

【讨论】：

【解决方案5】：

在 Bootstrap 版本 4 中，类“.img-responsive”已更改为“.img-fluid”。

【讨论】：