使用 Bootstrap 使徽标图像响应

Question

我正在使用 bootstrap 网站 header。如果我想让网站的徽标响应，我应该有两个徽标图像（一个用于桌面，一个用于移动）还是应该调整图像徽标的大小？获得它的最佳方法是什么？谢谢。那是我的代码：

 <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

添加class

img-responsive

到你的图片

添加两张图片应该会更好。但是很多浏览器不承认你的小图片是为了响应（希望这会很快改变）。所以他们必须加载 2 张图像。哪个加载更重（也更慢）。

目前最好只将 class 添加到您的图片中。

Answer 2

在 bootstrap 中有一个 class 可以使图像响应。

class是img-responsive

将此添加到您的 img 标签，图像将变为响应式。

Answer 3

我不认为这个问题只有一个答案，但我会尽力阐明您的选择。

使用 Bootstrap，您可以将 .img-responsive class 添加到图像，以使其随页面宽度调整大小。根据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.

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

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

Answer 4

Bootstrap 的响应式图片 class 将最大宽度设置为 100%。这限制了它的大小，但不会强制它拉伸以填充比图像本身大的父元素。您必须使用宽度属性来强制放大。

http://getbootstrap.com/css/#images-responsive

感谢伊舍伍德 DEMO

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

Answer 5

您现在拥有图像的地方，使用 height:100% 和 width:auto，应使其与导航栏的大小保持一致。对于您拥有的任何设备，导航栏默认为 50px 高。

Answer 6

覆盖此类

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

Answer 7

我更喜欢其他解决方案。创建另一个 class 名为 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;
}

这样您的徽标将始终根据您的导航栏内容进行调整。

Answer 8

要使图像在 Bootstrap 中响应，请将 class .img-responsive 添加到标签。这 class 适用 max-width: 100%;和高度：自动；到图像，以便它很好地缩放到父元素。

以下是您可以简单地使图像具有响应性的方法 -

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Example</title>
      <link href = "/bootstrap/css/bootstrap.min.css" rel = "stylesheet">
      <script src = "/scripts/jquery.min.js"></script>
      <script src = "/bootstrap/js/bootstrap.min.js"></script>
   </head>
   <body>
      <img src = "~/Content/images/logo.png" class = "img-responsive" alt = "Logo Bar">
   </body>
</html>

使用 Bootstrap 使徽标图像响应

Make logo image responsive using Bootstrap

html

css

navbar

responsive-design

twitter-bootstrap