gpt4 book ai didi

image - 小屏幕的 Bootstrap 图像调整大小,不起作用

转载 作者:行者123 更新时间:2023-12-04 18:41:36 24 4
gpt4 key购买 nike

我正在尝试使用 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-responsive 类会自动使您的图像更小以适应较小的屏幕,但这并不是它的工作原理。

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

希望这可以帮助

关于image - 小屏幕的 Bootstrap 图像调整大小,不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24694697/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com