为小屏幕调整引导图像大小，不起作用
为小屏幕调整引导图像大小，不起作用
提问于 2014-07-11 17:39:31
我正在尝试使用Bootstrap调整图像大小。我有一个足够大的标志，为大屏幕和分辨率。显然，图像应该在所有分辨率(大小分辨率)下都能很好地调整大小。我使用了Bootstrap的.img响应类来响应图像。很明显，图像在大分辨率下显示良好，但在较小分辨率下图像应该变小。问题是- image在较小的分辨率下不会变小。任何帮助都将不胜感激。
<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>回答 5
Stack Overflow用户
发布于 2014-07-11 21:13:44
我认为问题的根源在于，您期望.img响应类会自动使您的图像在较小的屏幕上变小，而这并不完全是它的工作方式。
它实际上对图像应用max-width: 100%；和height: auto；，也就是说，如果它是一个宽的图像，它不会比它的父图像宽。http://getbootstrap.com/css/#images
希望这能有所帮助
Stack Overflow用户
发布于 2018-01-02 18:41:37
对于引导程序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> Stack Overflow用户
发布于 2016-01-19 01:15:22
<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> `页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/24694697
复制相关文章
相似问题
腾讯云开发者
