twitter-bootstrap Bootstrap 图像调整小屏幕的大小，不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24694697/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap image resize for small screen, not working
提问by Jay
I am trying to resize image using Bootstrap. I have a sufficiently large logo, for large screens & resolutions. Apparently, the image should resize well in all resolutions (small & big resolutions). I have used the Bootstrap's .img-responsive class for making images responsive. As is evident, image shows fine in large resolutions, but the image should become small in smaller resolutions. The problem is that - image is not getting smaller in smaller resolutions. Any help would be highly appreciated.
我正在尝试使用 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>
回答by David Taiaroa
I think the root of your problem is that you are expecting that the .img-responsive class will automatically make your images smaller for smaller screens, and this isn't exactly how it works.
我认为您的问题的根源在于您期望 .img-responsive 类会自动使您的图像在较小的屏幕上变小，但这并不是它的工作原理。
It actually applies max-width: 100%; and height: auto; to the image, i.e. if it's a wide image it won't be wider than its parent. http://getbootstrap.com/css/#images
它实际上适用于 max-width: 100%; 和高度：自动；到图像，即如果它是一个宽图像，它不会比它的父级更宽。http://getbootstrap.com/css/#images
Hope this helps
希望这可以帮助
回答by Deepak Kumar
With bootstrap 4 there are display utilities which can be used to render different images for different viewport,
使用 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>
回答by Philomena
<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> `
回答by Nirmalya Mondal
In Bootstrap version 4 class ".img-responsive" has been changed to ".img-fluid".
在 Bootstrap 版本 4 中，类“.img-responsive”已更改为“.img-fluid”。
回答by Karthick
use the class="img-responsive" and it will shrink the image when you open in mobile or other device using bootstrap css. but for u its not working can u check the correct links you added in the headers.
使用 class="img-responsive" 它会在您使用引导 css 在移动设备或其他设备中打开时缩小图像。但对你来说它不起作用你可以检查你在标题中添加的正确链接。
