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

Answer 1

您可以为此

设置以下css

pivot[0]

Answer 2

提供您的徽标.navbar-brand { position: relative; background: url(../images/logo.png); width: 170px; left: 15px; max-height: 70px; /* height of the navbar */ }并将值设置为导航栏的高度，如此...

<algorithm>

Answer 3

你可以使用这个css

background：url（../ images / logo.png）无重复滚动中心/包含;

Answer 4

最佳选择是在Photoshop（或类似）中调整徽标大小。

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

Answer 5

同意ABK的最大高度CSS，但我认为JGonDev在调整图像大小方面是性能观点的正确方向。你真的应该只使用CSS来设计和设计你的网站。它不应该用于破解你的代码以强制所需的欲望。

就调整大小而言，大多数新开发人员无法访问Photoshop等优秀的设计工具，但如果可以的话，那就太好了！对于Mac用户，预览可以完成调整图像大小的工作。

在预览中打开图像 - 转到工具/调整大小：

然后您可以将宽度或高度更改为所需的大小。确保按比例保持比例！这将确保您的图像不会偏斜。

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

**注意 - 请确保将文件另存为其他文件，即navbar-logo.png或类似内容，以便您可以轻松记住代码中应使用的图像。

调整图片大小可以减少整个网站的膨胀和大小，并提高网站的整体效果。

Answer 6

**您问题的最简单答案是**

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

如果您觉得有用，请别忘了UPVOTE

Answer 7

您永远需要的导航栏
将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>

Answer 8

你是否需要在下面提供任何外部css。

在图片上使用class =“img-responsive”。

max-height

Bootstrap：Navbar徽标大小

8 个答案: