使用Bootstrap使Logo图像响应式

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>

- D.B

---

你可以使用width: 100%来设置logo，这样它就会自动调整大小，高度自适应。 - Sai Deepak

我会先在我的图像类中添加class="img-responsive"。然后，您可以测试页面加载时间，如果您认为图像的大小差异足以证明添加较小分辨率的图像和支持逻辑，则可以这样做。 - Dan Beaulieu

宽度为100％与从bootstrap添加img-responsive类相同。 - Dan Beaulieu

非常感谢。我会考虑你的建议。 - D.B

Answer 1

我认为这个问题没有一个单一的答案，但我会尝试解释你的选择。

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

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

现在我将进一步介绍 - 使用两个不同的图像。这与桌面版与移动版不同，而是屏幕分辨率不同。例如，Retina屏幕会以更高的分辨率显示图像。许多人会提供两个不同的图像，一个是普通分辨率，另一个是Retina屏幕的2倍分辨率。

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

- Tim McClure

---

好的。谢谢。我会考虑为视网膜显示屏做准备的想法。 - D.B

Answer 2

Bootstrap的响应式图像类将max-width设置为100%。这限制了它的大小，但不会强制拉伸以填充比图像本身大的父元素。您必须使用width属性来强制放大。http://getbootstrap.com/css/#images-responsive感谢isherwood演示

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

- sheshadri

Answer 3

添加类。

img-responsive

对于你的图片

添加两张图片会更好。但是许多浏览器无法识别你较小的响应式图片（希望这很快会改变）。因此他们必须加载两张图片。这样加载速度更慢（也更慢）。

现在最好只是将类添加到您的图像中。

- Danny van Holten

Answer 4

覆盖这些类。

.navbar-brand {
  padding: 0px;
}
.navbar-brand>img {
  height: 100%;
  padding: 15px;
  width: auto;
}

- Udara Herath

---

谢谢，通过使用媒体查询和覆盖默认类，我成功地做到了。 - Abdelsalam Shahlol

Answer 5

在您现在拥有的图像位置，使用height:100%和width:auto，应将其保持为导航栏的大小。无论您使用什么设备，默认情况下导航栏高度为50px。

- spasticninja

Answer 6

在Bootstrap中有一个类可以使图像具有响应性。

这个类是“img-responsive”。

将其添加到您的img标签中，图像就会变得具有响应性。

- Saiyam Gambhir

Answer 7

我更喜欢另一种解决方案。创建另一个名为logo-navbar的类：

<a class="navbar-brand js-scroll-trigger" href="#page-top">
    <img class="logo-navbar" src="img/logo-1-img-black.png">
</a>

并将菜单字体大小应用于关联宽度：

img.logo-navbar {
    width: 2rem !important;
    height: 2rem !important;
}

这样，您的标志将始终与导航栏内容相匹配。

- cbcram