使用 Bootstrap 使徽标图像具有响应性

Posted 2023-03-05

【中文标题】使用 Bootstrap 使徽标图像具有响应性

【英文标题】：Make logo image responsive using Bootstrap

【发布时间】：2015-07-13 19:57:34

【问题描述】：

我正在使用引导程序作为站点标题。如果我想让网站的徽标具有响应性，我应该有两张徽标图片（一张用于桌面，一张用于移动设备）还是应该调整图片徽标的大小？获得它的最佳方法是什么？谢谢。 这是我的代码：

 <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid"></div>
    <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 src="~/Content/images/logo.png" /></a>
    </div>

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav navbar-right">
            <li class="active"><a href="/">Home</a></li>
            <li><a href="~/About/Index">About</a></li>
            <li><a href="~/Contact/Index">Contacts</a></li>
        </ul>
    </div>

</nav>

【问题讨论】：

您可以使用 width: 100% 作为徽标，以便自动调整大小和高度。

我会从添加 class="img-responsive" 到我的图像类开始。然后，您可以测试您的页面加载时间，如果您认为图像的大小差异足以改善它以证明添加更小分辨率的图像和支持逻辑是合理的，那么就这样做。

width: 100% 与从 bootstrap 添加 img-responsive 类相同

非常感谢。我会考虑你的建议。

【参考方案1】：

我更喜欢另一种解决方案。创建另一个名为 logo-navbar 的类：

<a class="navbar-brand js-scroll-trigger" href="#page-top">
    <img class="logo-navbar" src="img/logo-1-img-black.png">
</a>

并应用了与菜单字体大小相关的宽度：

img.logo-navbar 
    width: 2rem !important;
    height: 2rem !important;

这样您的徽标将始终根据您的导航栏内容进行调整。

【参考方案2】：

重写这个类

.navbar-brand 
  padding: 0px;

.navbar-brand>img 
  height: 100%;
  padding: 15px;
  width: auto;

【讨论】：

谢谢，通过使用媒体查询和覆盖默认类，我设法做到了。

【参考方案3】：

我认为这个问题没有一个单一的答案，但我会尝试阐明您的选择。

使用 Bootstrap，您可以将 .img-responsive 类添加到图像中，以使其随页面宽度调整大小。根据Bootstrap's documentation：

通过添加 .img-responsive 类，可以使 Bootstrap 3 中的图像响应友好。这会将max-width: 100%;、height: auto; 和display: block; 应用于图像，以便它很好地缩放到父元素。

现在我会更进一步 - 有两个不同的图像。对于桌面与移动而言，这与其说是屏幕分辨率，不如说是屏幕分辨率。例如，视网膜屏幕将以更高的分辨率显示图像。许多人提供两种不同的图像，一种是正常分辨率，另一种是视网膜屏幕的两倍。

This tutorial 重点介绍了为 Retina 屏幕准备图像的一些方法，包括提供一张源图像然后缩小尺寸或使用 CSS 媒体查询更改图像的src。我还要补充一点，使用 CSS 媒体查询来更改图像的src 并不一定意味着用户必须下载同一图像的两个版本。

【讨论】：

好吧。谢谢。我会考虑为视网膜显示器做好准备。

【参考方案4】：

您现在拥有图像的位置，使用 height:100% 和 width:auto，应该将其保持为导航栏的大小。对于您拥有的任何设备，默认情况下导航栏的高度为 50 像素。

【参考方案5】：

Bootstrap 的响应式图像类将 max-width 设置为 100%。这限制了它的大小，但不会强制它拉伸以填充大于图像本身的父元素。您必须使用 width 属性来强制放大。

http://getbootstrap.com/css/#images-responsive

感谢艾舍伍德 DEMO

<img src="http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg" class="img-responsive" >

【参考方案6】：

在引导程序中有一个类可以使图像响应。

班级是img-responsive

将此添加到您的 img 标签中，图像将变得响应。

【参考方案7】：

添加类

img-responsive

到你的图片

添加两个图像应该会更好。但是很多浏览器不知道你的小图片是为了响应式的（希望这会很快改变）。所以他们必须加载 2 张图片。哪个更重（且更慢）加载。

现在最好将类添加到您的图像中。