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

问题描述

我使用引导程序作为网站标题。如果我想让网站的徽标响应，我应该有两个标志图像（一个用于桌面和一个移动）或应该调整我的图像标志的大小？什么是最好的方式得到它？谢谢。
这是我的代码：

 < nav class =navbar navbar-default navbar-fixed-top> 
< div class =container-fluid>< / div> 
< div class =navbar-header> 
< button type =buttonclass =navbar-toggle collapseddata-toggle =collapsedata-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> 
< / button> 
< a class =navbar-brandhref =＃>< img src =〜/ Content / images / logo.png/>< / a> 
< / div> 
 
< div class =collapse navbar-collapseid =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& 
< / ul> 
< / div> 
 
< / nav> 
  

解决方案

我不认为有一个答案

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

Bootstrap 3中的图片可以通过添加 .img-responsive 类来实现响应式。这适用于 max-width：100％; ， height：auto; 和 ;




现在我把它放在图像上进一步具有两个不同图像的步骤。这不是那么多的桌面与移动，因为它是屏幕分辨率。例如，视网膜屏幕将以更高的分辨率显示图像。许多人提供两个不同的图像，一个在正常分辨率和一个双倍的视网膜屏幕。

本教程强调了为Retina屏幕准备图像的一些方法，包括提供一个缩小的源图像或使用CSS Media查询来更改 src 的图像。我还将补充说，使用CSS媒体查询来更改图像的 src 并不一定意味着用户将必须下载两个版本的同一个图像。 / p>


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