Bootstrap：导航标志大小

问题描述：

我有一个1700x700的标志和我的导航栏高度是70.我想自动调整大小，并将其适应我的导航栏高度。我可以用photoshop将其大小调整为170x70，但问题在于放大时图像质量下降。Bootstrap：导航标志大小

我试着用img-responsive但不起作用。

谢谢！

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



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

答

您可以设置下面的CSS此

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

谢谢！它现在可以工作，但我的标志位于导航栏的顶部。你有没有关于如何居中（作为身高）的理念？ – Asez

为了对齐，您可以使用background：url（../ images/logo。png）中心; –

答

你有没有下面的一个，你不需要给任何外部CSS。

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

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

请检查你的语法。你是什么意思，“你下面的一个你不需要给任何外部的CSS”？ – Abk

答

给您的标志max-height，使值是像这样的导航栏的高度...

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

答

你可以使用这个CSS

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

答

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

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

答

同意ABK尽可能最大高度的CSS，但我认为JGonDev调整图像大小是从性能角度来看的正确方向。你真的应该只使用CSS来设计你的网站。它不应该被用来破解你的代码来强制所需的愿望。

就调整大小而言，大多数新开发人员无法访问像Photoshop这样的优秀设计工具，但如果可以的话，您将无法使用！对于Mac用户，Preview可以完成调整图像大小的工作。

在预览打开图像 - 转到工具/ AdjustSize：

那么您可以在宽度或高度更改为所需的大小。确保按比例检查比例！这将确保您的图像不会偏斜。

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

**注意 - 请确保将您的文件保存为不同的文件，即navbar-logo.png或类似的文件，以便您可以轻松记住图像在代码中的用途。

调整图片大小将减少整体网站的膨胀和大小，并改善您网站的整体表现。

Bootstrap：导航标志大小

相关推荐