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>

Answer 1

我不认为这个问题有一个单一的答案，但我会试着说明你的选择。

使用Bootstrap，您可以将.img-responsive类添加到图像中，以使其随页面宽度调整大小。根据{{3}}：

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

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

Bootstrap's documentation突出显示了为Retina屏幕准备图像的一些方法，包括提供一个缩小尺寸的源图像或使用CSS媒体查询来更改图像的src。我还要补充说，使用CSS媒体查询来更改图像的src并不一定意味着用户必须下载同一图像的两个版本。

Answer 2

Bootstrap的响应式图像类将max-width设置为100％。这会限制其大小，但不会强制它进行拉伸以填充大于图像本身的父元素。您必须使用width属性强制升级。

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

谢谢isherwood 的 DEMO

$process->setPty(true);

Answer 3

添加课程

SELECT column1, column2, column3, MAX(column4), column5,
       (SELECT ov_merkmalwertid 
          FROM V_OV_MERKMALWERT 
         WHERE objektfk = table2.OV_OBJEKTID 
           AND MERKMAL = 'censored1') column6,
       (SELECT ov_merkmalwertid 
          FROM V_OV_MERKMALWERT 
         WHERE objektfk = table2.OV_OBJEKTID 
           AND MERKMAL = 'censored2') column7,
       (SELECT ov_merkmalwertid 
          FROM V_OV_MERKMALWERT 
         WHERE objektfk = table2.OV_OBJEKTID  
           AND MERKMAL = 'censored3') column8,
       (SELECT ov_merkmalwertid 
          FROM V_OV_MERKMALWERT 
         WHERE objektfk = table2.OV_OBJEKTID 
           AND MERKMAL = 'censored4') column9
  FROM table1,
       table2
 WHERE table1.DEVICEID = table2.OV_OBJEKTID
 GROUP BY column5;

到您的图片

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

现在，只需将该类添加到图像中即可。

Answer 4

现在您拥有图像，使用高度：100％和宽度：自动，应该保持其大小与导航栏的大小相同。对于您拥有的任何设备，导航栏默认为50px高。

Answer 5

重写此类

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

Answer 6

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

该课程为img-responsive

将此添加到您的img标记中，图像将变为响应状态。

Answer 7

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

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

并使用菜单字体大小将关系宽度设置为

{{1}}

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

使用Bootstrap使徽标图像响应

7 个答案: