Image 为小屏幕调整引导图像大小，不起作用_Image_Twitter Bootstrap_Resize

Image 为小屏幕调整引导图像大小，不起作用

image twitter-bootstrap

Image 为小屏幕调整引导图像大小，不起作用,image,twitter-bootstrap,resize,Image,Twitter Bootstrap,Resize,我正在尝试使用引导调整图像大小。我有一个足够大的标志，用于大屏幕和分辨率。显然，图像在所有分辨率（小分辨率和大分辨率）下都应该调整好大小。我使用了Bootstrap的.img responsive类，使图像具有响应性。很明显，图像在大分辨率下显示良好，但在小分辨率下图像应变小。问题是，在更小的分辨率下，图像并没有变得更小。任何帮助都将不胜感激 <BODY> <nav class="navbar navbar-default"> <div

我正在尝试使用引导调整图像大小。我有一个足够大的标志，用于大屏幕和分辨率。显然，图像在所有分辨率（小分辨率和大分辨率）下都应该调整好大小。我使用了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响应类会自动将您的图像缩小到更小的屏幕，而这并不是它的工作原理

它实际上应用了最大宽度：100%；高度：自动；对于图像，即，如果是宽图像，则不会比其父图像宽

希望这有助于使用class=“img responsive”，当您使用引导css在移动设备或其他设备中打开时，它将缩小图像。但是对于你来说，它不起作用。你可以检查你在标题中添加的正确链接。


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





`

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

e、 g

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

将img标签放在您喜欢的任何位置，导航或DIV（容器），结果应相同。我想你的问题是父元素。请为我们提供一些代码，或更好地创建一个示例引导您的问题。如果没有这个，你很难得到帮助。你也可以在这里查看它，这样你就可以看到图像不会随着分辨率而缩小或扩大。它们始终保持不变。下次请通过

编辑功能将代码添加到问题中。我尝试了您的示例代码，它对我很好（）。你的问题似乎在别的地方。那有什么问题？在您的enterhelix.com/new网站上，徽标的大小对我来说非常合适。是的，这正是我所期望的。所以，要使它对于较小的分辨率变小，我应该怎么做？我是否必须使用自己的媒体查询，即不同分辨率的不同图像。@user2554706，是的，媒体查询将是一个选项。挑战可能是，随着引导网格的更改或折叠，图像父对象的宽度将更改，因此您需要多个规则来允许窗口或视口宽度以及图像的细节。我有一个想法，如果对你有用的话：。。。祝你好运是的，我正是这么想的。我必须写多条规则。我想知道，Bootstrap如此受欢迎，为什么他们没有解决这个非常普遍的问题。谢谢你的帮助。你能回答这个问题吗@user2554706>为什么他们没有解决这个非常常见的问题。。Bootstrap可以节省大量时间，但它不是镇上唯一的一匹马。还有许多其他的好选择，它们都有各自的优点和不同之处，你可能更喜欢其中一个。如果你还没有，你可以看的其他一些是或。他们都很好；）
<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>