使用 Bootstrap 使徽标图像响应
Make logo image responsive using Bootstrap
我正在使用 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>
添加class
img-responsive
到你的图片
添加两张图片应该会更好。但是很多浏览器不承认你的小图片是为了响应(希望这会很快改变)。所以他们必须加载 2 张图像。哪个加载更重(也更慢)。
目前最好只将 class 添加到您的图片中。
在 bootstrap 中有一个 class 可以使图像响应。
class是img-responsive
将此添加到您的 img 标签,图像将变为响应式。
我不认为这个问题只有一个答案,但我会尽力阐明您的选择。
使用 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
并不一定意味着用户必须下载同一图像的两个版本。
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">
您现在拥有图像的地方,使用 height:100% 和 width:auto,应使其与导航栏的大小保持一致。对于您拥有的任何设备,导航栏默认为 50px 高。
覆盖此 类
.navbar-brand {
padding: 0px;
}
.navbar-brand>img {
height: 100%;
padding: 15px;
width: auto;
}
我更喜欢其他解决方案。创建另一个 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;
}
这样您的徽标将始终根据您的导航栏内容进行调整。
要使图像在 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 网站 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>
添加class
img-responsive
到你的图片
添加两张图片应该会更好。但是很多浏览器不承认你的小图片是为了响应(希望这会很快改变)。所以他们必须加载 2 张图像。哪个加载更重(也更慢)。
目前最好只将 class 添加到您的图片中。
在 bootstrap 中有一个 class 可以使图像响应。
class是img-responsive
将此添加到您的 img 标签,图像将变为响应式。
我不认为这个问题只有一个答案,但我会尽力阐明您的选择。
使用 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 appliesmax-width: 100%;
,height: auto;
anddisplay: block;
to the image so that it scales nicely to the parent element.
现在我将更进一步 - 有两个不同的图像。与其说是桌面与移动设备,不如说是屏幕分辨率。例如,视网膜屏幕将以更高分辨率显示图像。许多人提供两种不同的图像,一种是正常分辨率,另一种是视网膜屏幕的两倍。
This tutorial 重点介绍了一些为 Retina 屏幕准备图像的方法,包括提供一张源图像然后缩小尺寸或使用 CSS 媒体查询更改图像的 src
.我还要补充一点,使用 CSS 媒体查询更改图像的 src
并不一定意味着用户必须下载同一图像的两个版本。
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">
您现在拥有图像的地方,使用 height:100% 和 width:auto,应使其与导航栏的大小保持一致。对于您拥有的任何设备,导航栏默认为 50px 高。
覆盖此 类
.navbar-brand {
padding: 0px;
}
.navbar-brand>img {
height: 100%;
padding: 15px;
width: auto;
}
我更喜欢其他解决方案。创建另一个 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;
}
这样您的徽标将始终根据您的导航栏内容进行调整。
要使图像在 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>