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

Question

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

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

原文由 D.B 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

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

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

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

原文由 Tim McClure 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

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

感谢 isherwood DEMO

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

原文由 sheshadri 发布，翻译遵循 CC BY-SA 3.0 许可协议