Bootstrap: 导航栏 Logo 大小

Question

我有一个1700x700的标志和导航栏高度为70。我希望自动调整大小并适应我的导航栏高度。我可以使用Photoshop将其调整为170x70，但问题是当我放大图像时图像会失去质量。

我尝试过使用img-responsive，但它没有起作用。

谢谢！

<a class="navbar-brand" href="index.php"></a>



.navbar-brand
{
    position: relative;
    background: url(../images/logo.png);
    width: 170px;
    left: 15px;
}

- Asez

Answer 1

你可以为此设置以下css：

.navbar-brand {
    position: relative;
    background: url(../images/logo.png);
    width: 170px;
    left: 15px;
    background-size: contain;
}

- Super User

---

谢谢！现在它可以工作了，但我的标志位于导航栏的顶部。你有什么想法如何将其居中（高度）？ - Asez

为了对齐，您可以使用 background: url(../images/logo.png) center center; - Super User

Answer 2

最好的选择是在Photoshop（或类似软件）中调整logo的大小。

当然，如果以较少的像素显示它，它会失去分辨率，但如果您加载一个大的logo，然后通过css调整大小，效果将是相同的，而且页面加载时间会更长。

- jgondev

---

而且这种方法可以减少页面加载时间。 +1 - Taha Paksu

Answer 3

我同意ABK的观点，使用max-height CSS，但我认为JGonDev在调整图像大小方面从性能角度来看是正确的方向。你真的应该只使用CSS来设计和美化你的网站。它不应该被用来hack你的代码以强制实现所需的目标。

就调整大小而言，大多数新手开发者没有像Photoshop这样的优秀设计工具，但如果你有的话那就太好了！对于Mac用户，Preview可以完成调整图像大小的工作。

打开你的图像，在Preview中选择工具/调整大小：

然后您可以更改所需大小的宽度或高度。确保保持比例缩放选项勾选！这将确保您的图像不会变形。

调整大小后，点击“确定”按钮。文件保存。

**注意-确保您将文件另存为不同的文件，例如navbar-logo.png或类似的文件，以便您可以轻松记住图像应在代码中用于什么目的。

调整图像大小将减少您整个网站的冗余和大小，并提高网站的整体性能。

- Chuck Gray

Answer 4

您问题的最简单答案是：

<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;
}

如果您觉得这很有用，请不要忘记点赞

- Chaitanya Mogal

Answer 5

你所需要的导航栏
使用flex和justify-content自动调整内容位置
align-items:center，这很容易理解

按照您的需求进行调整

*,
*: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>

- Anuja Nimesh

Answer 6

你可以使用这个 CSS：

background: url(../images/logo.png) no-repeat scroll center center / contain;

- Suraj Pradhan

Answer 7

给你的标志 max-height 并将值设置为导航栏的高度，如下所示...

.navbar-brand
{
    position: relative;
    background: url(../images/logo.png);
    width: 170px;
    left: 15px;
    max-height: 70px; /* height of the navbar */
}

- Abk

Answer 8

你可以使用class="img-responsive"来设置图片大小，无需添加外部CSS。

在图片上应用class="img-responsive"即可。

<a class="navbar-brand" href="#"><img alt="Brand" src="images/logo.png" class="img-responsive" /></a>

- Pramodkumar