Html 使用 Bootstrap 使徽标图像具有响应性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30030009/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Make logo image responsive using Bootstrap
提问by D.B
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>
采纳答案by Tim McClure
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-responsiveclass to the image in order to make it resize with the page width. According to Bootstrap's documentation:
使用 Bootstrap，您可以将.img-responsive类添加到图像中，以便根据页面宽度调整其大小。根据Bootstrap 的文档：
Images in Bootstrap 3 can be made responsive-friendly via the addition of the
.img-responsiveclass. This appliesmax-width: 100%;,height: auto;anddisplay: block;to the image so that it scales nicely to the parent element.
通过添加
.img-responsive类，Bootstrap 3 中的图像可以变得响应友好。这适用于max-width: 100%;,height: auto;和display: block;图像，以便它可以很好地缩放到父元素。
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.
现在我将更进一步 - 有两个不同的图像。对于桌面与移动设备而言，这与其说是屏幕分辨率，不如说是屏幕分辨率。例如，Retina 屏幕将以更高的分辨率显示图像。许多人提供两种不同的图像，一种是正常分辨率，另一种是视网膜屏幕分辨率的两倍。
This tutorialhighlights 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 srcof the image. I'll also add that using CSS Media Queries to change the srcof the image doesn't necessarily mean that the user will have to download two versions of the same image.
本教程重点介绍了一些为 Retina 屏幕准备图像的方法，包括提供一个源图像，然后缩小尺寸或使用 CSS 媒体查询来更改src图像的大小。我还要补充一点，使用 CSS Media Queries 更改src图像并不一定意味着用户必须下载同一图像的两个版本。
回答by sheshadri
Bootstrap's responsive image class sets max-width to 100%. This limits its size, but does not force it to stretch to fill parent elements larger than the image itself. You'd have to use the width attribute to force upscaling.
Bootstrap 的响应式图像类将 max-width 设置为 100%。这限制了它的大小，但不会强制它拉伸以填充比图像本身更大的父元素。您必须使用 width 属性来强制放大。
http://getbootstrap.com/css/#images-responsive
http://getbootstrap.com/css/#images-responsive
thanks to isherwood DEMO
感谢isherwood DEMO
<img src="http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg" class="img-responsive" alt="Responsive image">
回答by spasticninja
Where you have the image now, using height:100% and width:auto, should keep it to the size of the navbar. The navbar is 50px tall by default for whatever device you've got.
您现在拥有图像的位置，使用 height:100% 和 width:auto，应将其保持为导航栏的大小。对于您拥有的任何设备，导航栏默认为 50 像素高。
回答by Udara
Override this classes
覆盖这个类
.navbar-brand {
padding: 0px;
}
.navbar-brand>img {
height: 100%;
padding: 15px;
width: auto;
}
回答by Danny van Holten
add the class
添加班级
img-responsive
to your image
你的形象
Adding two images should be better. But a lot of browsers don't recognise that your smaller image is for responsive (hopefully this will change soon). So they'll have to load 2 images. Which is heavier (and slower) to load.
添加两个图像应该会更好。但是很多浏览器都没有意识到您的较小图像是用于响应式的（希望这会很快改变）。所以他们必须加载 2 张图片。哪个更重（更慢）加载。
For now it is still better to just add the class to your image.
现在最好将类添加到您的图像中。
回答by Saiyam Gambhir
In bootstrap there is a class to make images responsive.
在 bootstrap 中有一个类可以使图像具有响应性。
The class is img-responsive
班级是 img-responsive
Add this to your img tag and the image will become responsive.
将此添加到您的 img 标签，图像将变得响应。
回答by cbcram
I prefer another solution. Create another class called logo-navbar:
我更喜欢另一种解决方案。创建另一个名为 logo-navbar 的类：
<a class="navbar-brand js-scroll-trigger" href="#page-top">
<img class="logo-navbar" src="img/logo-1-img-black.png">
</a>
And aplied a relational width with the menu font-size:
并应用菜单字体大小的关系宽度：
img.logo-navbar {
width: 2rem !important;
height: 2rem !important;
}
This way your logo will always be adjust with your navbar content.
这样，您的徽标将始终根据您的导航栏内容进行调整。
