jQuery 调整引导导航栏品牌标志的大小，保持比例
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30478744/
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
Resize bootstrap navbar brand logo keeping proportions
提问by lateralus
I was wondering if there's a way to dinamically resize the navbar brand logo image to have the exact height of the navbar itself and calculate the width keeping the image proportion.
我想知道是否有一种方法可以动态调整导航栏品牌徽标图像的大小以具有导航栏本身的确切高度并计算保持图像比例的宽度。
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img alt="Brand" src="images/logo.png"></a>
</div>
I tried to edit the bootstrap .css adding:
我试图编辑 bootstrap .css 添加：
.navbar .brand > img { max-height: 40px; }
or:
或者：
.navbar .brand {
max-height: 40px;
max-width: 30%;
overflow: visible;
padding-top: 0;
padding-bottom: 0;
}
with no luck, the image remains with the same giant size.
运气不好，图像仍然保持相同的巨大尺寸。
The first one should do the trick, I want these settings to be applied inside the img tag inside the a tag with navbar-brandclass, but, even if the css is refreshed correctly, these settings are not applied to my image.
第一个应该可以解决问题，我希望将这些设置应用于带有navbar-brand类的标签内的 img 标签内，但是，即使正确刷新了 css，这些设置也不会应用于我的图像。
采纳答案by cfnerd
In the CSS you provided, you may be referencing the wrong class name. You would need to override the .navbar-brandclass, but you are referencing a .brandclass name within .navbar. As such, the styles will not be applied to the element you are wanting it to.
在您提供的 CSS 中，您可能引用了错误的类名。您需要覆盖.navbar-brand该类，但您.brand在.navbar. 因此，样式不会应用于您想要的元素。
Also, did you try using the class="img-responsive"on the image?
另外，您是否尝试class="img-responsive"在图像上使用？
<a class="navbar-brand" href="#"><img alt="Brand" src="images/logo.png" class="img-responsive" /></a>
Otherwise, take a look at this Stackoverflow article, as it is similar: Bootstrap 3 Navbar with Logo.
否则，看看这篇 Stackoverflow 文章，因为它是类似的：Bootstrap 3 Navbar with Logo。
Hope this helps your cause.
希望这有助于您的事业。
回答by Alderwiereld Baratheon
I dont know but this works with bootstrap css
我不知道，但这适用于 bootstrap css
@media(*here you indicate the screen size){ //here you indicate the image icon class or property then you can specify the image size you desire under the constriction of the size }
@media(*此处表示屏幕尺寸){ //此处表示图像图标类或属性，然后可以在尺寸的限制下指定所需的图像尺寸 }
