使用Bootstrap使徽标图像响应

Question

我正在使用bootstrap作为站点标题.如果我想使网站的徽标响应,我应该有两个徽标图像(一个用于桌面,一个用于移动)或者我应该调整我的图像徽标吗？获得它的最佳方法是什么？谢谢.那是我的代码:

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

Answer 1

我不认为这个问题有一个单一的答案,但我会试着说明你的选择.

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

通过添加.img-responsive课程,Bootstrap 3中的图像可以响应友好.这适用max-width: 100%;,height: auto;并display: block;在图像,使其很好地扩展到父元素.

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

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