CSS Bootstrap：导航栏徽标大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/40436285/
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: Navbar Logo Size
提问by Asez
I have a 1700x700 logo and my navbar height is 70. I would like to auto-resize and adapt it to my navbar height. I could resize it to 170x70 with photoshop but the problem is that the image loses quality when I zoom on.
我有一个 1700x700 的徽标，我的导航栏高度是 70。我想自动调整大小并使其适应我的导航栏高度。我可以使用 photoshop 将其调整为 170x70，但问题是放大时图像质量下降。
I tried with img-responsive but it doesn't work.
我尝试使用 img-responsive 但它不起作用。
Thank you!
谢谢！
<a class="navbar-brand" href="index.php"></a>
.navbar-brand
{
position: relative;
background: url(../images/logo.png);
width: 170px;
left: 15px;
}
回答by Super User
You can set following css for this
您可以为此设置以下css
.navbar-brand {
position: relative;
background: url(../images/logo.png);
width: 170px;
left: 15px;
background-size: contain;
}
回答by jgondev
The best option is resizing the logo in Photoshop (or similar).
最好的选择是在 Photoshop（或类似软件）中调整徽标的大小。
Of course if it is displayed in less pixels it loses resolution, but if you load a big logo and then you resize it via css the effect is going to be the same and your page will take more time to load.
当然，如果它以较少的像素显示，它会失去分辨率，但是如果您加载一个大徽标，然后通过 css 调整它的大小，效果将是相同的，您的页面将需要更多的时间来加载。
回答by Chuck Gray
Agree with ABK as far as max-height CSS, but I think JGonDev on resizing the image is the right direction for a performance standpoint. You really should only use CSS to style and design your site. It should not be used to hack your code to force the needed desire.
就 max-height CSS 而言，同意 ABK，但我认为 JGonDev 调整图像大小是从性能角度来看的正确方向。你真的应该只使用 CSS 来设计你的网站。它不应该用于破解您的代码以强制实现所需的愿望。
As far as resizing, most new developers don't have access to great design tools like Photoshop, but great if you can! For Mac users, Preview gets the job done for resizing images.
就调整大小而言，大多数新开发人员无法使用 Photoshop 等出色的设计工具，但如果可以，那就太好了！对于 Mac 用户，Preview 可以完成调整图像大小的工作。
Open your image in Preview - Go to Tools/AdjustSize:
在预览中打开您的图像 - 转到工具/调整大小：
Then you can change your width or height to the desired size. Make sure to keep Scale Proportionally checked! This will ensure your image does not get skewed.
然后您可以将宽度或高度更改为所需的大小。确保保持按比例缩放！这将确保您的图像不会倾斜。
After you resize, click 'OK' button. File Save.
调整大小后，单击“确定”按钮。文件保存。
** Note - Make sure you save your file as a different file, i.e. navbar-logo.png or something similar so you can easily remember what the image should be used for in your code.
** 注意 - 确保将您的文件另存为不同的文件，即 navbar-logo.png 或类似的文件，以便您可以轻松记住该图像在您的代码中的用途。
Resizing your image will reduce the bloat and size of your overall website and improve the overall performance of your site.
调整图像大小将减少整个网站的膨胀和大小，并提高网站的整体性能。
回答by Chaitanya Mogal
**Simplest Answer to your question is **
**对您的问题最简单的答案是**
<a class="navbar-brand" href="index.php"></a>
.navbar-brand
{
position: relative;
background: url(../images/logo.png);
width: 170px;
height: 15px;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}If you find it useful don't forget to UPVOTE
如果你觉得它有用不要忘记UPVOTE
回答by Anuja Nimesh
The navbar you will ever need
Use flexwith that justify-contentjustifies content automatically adjust items into positionalign-items:center, well it's self explanatory
你永远都需要的导航栏
使用flex与该justify-content证明内容自动调整物品进入位置align-items:center，以及它的自我解释
Adjust it to your need my liege
根据您的需要调整它，我的领主
*,
*:before,
*:after {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
box-sizing: border-box;
transition: .3s all;
}
header {
background: #D2DCE1;
z-index: 100;
}
nav {
width: 100%;
display: flex;
padding: 5px 15px;
justify-content: space-between;
max-width: 1366px;
margin: auto;
margin-bottom: 10px;
}
#logo {
float: left;
width: 250px;
height: 40px;
background: url('https://i.imgur.com/K5bq1MD.png') left/contain no-repeat;
}
#logo:hover {
background: url('https://i.imgur.com/Kbbcixn.png') left/contain no-repeat;
}
nav ul {
float: right;
display: flex;
justify-content: space-around;
}
nav ul li {
float: left;
display: flex;
margin: 0 20px 0;
align-items: center;
justify-content: space-around;
}
nav ul li a {
color: #000;
opacity: .6;
display: block;
font-size: 90%;
font-weight: bold;
font-family: Arial;
letter-spacing: 1px;
border-top: 1.5px solid transparent;
border-bottom: 1.5px solid transparent;
}
.active {
border-bottom: 1.5px solid #ff7700;
opacity: 1;
}
nav ul li a:hover {
opacity: 1;
}<header id="navbar">
<nav>
<a id=logo href="#"></a>
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
</ul>
</nav>
</header>回答by Abk
Give your logo max-heightand make the value to be the height of the navbar like so...
给你的标志max-height，使价值成为导航栏的高度，就像这样......
.navbar-brand
{
position: relative;
background: url(../images/logo.png);
width: 170px;
left: 15px;
max-height: 70px; /* height of the navbar */
}
回答by Suraj Pradhan
you can use this css
你可以使用这个css
background: url(../images/logo.png) no-repeat scroll center center / contain ;
背景： url(../images/logo.png) 无重复滚动中心中心/包含；
回答by Pramodkumar
Did you the below one you need not give any external css.
你是不是下面的你不需要给任何外部css。
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>
<a class="navbar-brand" href="#"><img alt="Brand" src="images/logo.png" class="img-responsive" /></a>
