使用引导程序使徽标图像响应

问题描述：

我正在使用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>

你可以使用宽度为标志，使其得到调整大小和高度自动100％。 –

我只是将class =“img-responsive”添加到我的图像类中。然后，您可以测试您的页面加载时间，并且如果您认为图像的大小差异会使其足够提高以证明添加较小分辨率的图像和逻辑来支持，那么请执行此操作。 –

宽度：100％与从引导添加img-responsive类相同 –

答

我不认为这个问题有一个单一的答案，但我会尽量阐明你的选择。

使用Bootstrap，您可以将.img-responsive类添加到图像，以便使其与页面宽度一起调整大小。根据Bootstrap's documentation：

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

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

This tutorial重点介绍了一些准备Retina屏幕图像的方法，包括提供一个源图像，然后缩小尺寸或使用CSS Media Queries更改图像的src。我还会补充说，使用CSS Media Queries来更改图像的src并不一定意味着用户将不得不下载同一图像的两个版本。

好。谢谢。我会考虑为视网膜显示器做好准备。 –

答

类

img-responsive

添加到您的图像

添加两个图像应该会更好。但很多浏览器都不认识到你的较小图像是用于响应的（希望这会很快改变）。所以他们必须加载2张图片。负载较重（较慢）。

现在，只需将该类添加到您的图像中仍然更好。

答

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

类是img-responsive

添加到您的img标签，图像会变得敏感。

答

Bootstrap的响应式图像类将最大宽度设置为100％。这限制了它的大小，但不会强制它伸展以填充大于图像本身的父元素。你必须使用width属性来强制升级。

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">

答

如果你有像现在，使用高度：100％，宽度：汽车，应该保持它的导航栏的大小。无论您拥有哪种设备，导航栏默认为50像素高。

答

覆盖这个班

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

谢谢，通过使用媒体查询并覆盖默认班级，我设法做到了这一点。 –

使用引导程序使徽标图像响应

相关推荐