使用 Bootstrap 使徽标图像具有响应性 [英] Make logo image responsive using Bootstrap

问题描述

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

 
<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">切换导航</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span><a class="navbar-brand" href="#"><img src="~/Content/images/logo.png"/></a>

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><ul class="nav navbar-nav navbar-right"><li class="active"><a href="/">首页</a></li><li><a href="~/About/Index">关于</a></li><li><a href="~/Contact/Index">联系人</a></li>

</nav>

解决方案

我不认为这个问题只有一个答案，但我会尝试阐明您的选择.

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

<块引用>

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

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

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

I am using bootstrap for a site header. If I would like to make the website's logo responsive, Should I have two logo images (one for desktop and one for mobile) or should I resize my image logo? what is the best way to get it? Thanks. That's my code:

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

解决方案

I don't think that there is one single answer to this question, but I'll try to shed some light on your options.

With Bootstrap, you can add the .img-responsive class to the image in order to make it resize with the page width. According to Bootstrap's documentation:

Images in Bootstrap 3 can be made responsive-friendly via the addition of the .img-responsive class. This applies max-width: 100%;, height: auto; and display: block; to the image so that it scales nicely to the parent element.

Now I'll take it a step further - having two different images. This isn't so much for Desktop vs. Mobile as it is screen resolution. Retina screens will display images at a higher resolution, for example. Many people provide two different images, one at normal resolution and one double that for retina screens.

This tutorial highlights some methods for preparing your images for Retina screens, including providing one source image that is then downsized or using CSS Media Queries to change the src of the image. I'll also add that using CSS Media Queries to change the src of the image doesn't necessarily mean that the user will have to download two versions of the same image.

这篇关于使用 Bootstrap 使徽标图像具有响应性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！