Пожалуйста, запустите следующий код, чтобы проверить версию.
#include<iostream>
int main() {
if (__cplusplus == 201402L) std::cout << "C++14\n";
else if (__cplusplus == 201103L) std::cout << "C++11\n";
else if (__cplusplus == 199711L) std::cout << "C++98\n";
else std::cout << "pre-standard C++\n";
}
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header" >
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<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="Default.aspx"> <span> <img alt="Logo" src="Images/shopify-bag.png"height="35" width="40"/></span> Shopping GO</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right"></ul>
// Не забыли добавить загрузчик в начало вашего кода.
Самый простой и лучший ответ на этот вопрос - установить максимальную ширину и высоту в зависимости от вашего логотипа, изображение будет иметь максимальную высоту 50px, но не более 200px.
<a href="index.html">
<img src="imgs/brand-w.png" style="max-height:50px;max-width:200px;">
</a>
Это будет зависеть от размера вашего логотипа и имеющихся у вас элементов навигационной панели.
Это не семантическое, но я просто использую существующий элемент a
, устанавливаю фоновое изображение, затем создаю несколько вариаций для разрешения @ 2x, меньших размеров экрана и т. Д.
Затем вы можете использовать класс .text-hide
, чтобы получить текст на странице по-старому. Простое и эффективное, но не правильное использование изображения.
Вот ссылка на вспомогательный класс для замены текста:
Вам не нужно добавлять дополнительный CSS, поскольку Bootstrap3 его предоставляет. Если вы не хотите добавить его. Это мой код размещения логотипа слева и ссылки справа. Эта навигация отзывчива. Внесите изменения, как считаете нужным.
HTML:
<nav class="navbar navbar-expand-lg navbar-light fixed-top" style="background-color:white;">
<div class="container">
<a class="navbar-brand" href="#"><img style=" width: 150px;" src="image.jpg" alt="Image text"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item"><a class="nav-link" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#">Projects</a></li>
<li class="nav-item"><a class="nav-link" href="#">Blog</a></li>
<li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
</ul>
</div>
</div>
</nav>
В моем случае не удалось заставить другие ответы работать (я, вероятно, не прошел тест на интеллект), и после некоторых экспериментов я использую это (которое, я считаю, очень близко к настройке Bootstrap по умолчанию):
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-logo">
<a class="navbar-brand" rel="home" href="@Url.Action("Index", "Home")" title="Home">
<img src="~/Images/logo.png" class="img-responsive">
</a>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav">
<li>@Html.ActionLink("Home", "Index", "Home")</li>
<li>@Html.ActionLink("Coaching", "Coaching", "Home")</li>
<li>@Html.ActionLink("Resources", "Resources", "Home")</li>
<li>@Html.ActionLink("Contact", "Contact", "Home")</li>
<li>@Html.ActionLink("Blog", "Blog", "Home")</li>
<li>@Html.ActionLink("About", "About", "Home")</li>
</ul>
</div>
</div>
</div>
И в файле CSS я добавил следующее:
.navbar-brand {
padding-top: 5px;
}
.navbar-collapse {
float: left;
}
.navbar-logo {
float: left;
}
Обратите внимание, что @Html.ActionLink()
- это синтаксис Razor для тега <a>
. Там, где написано @Html.ActionLink(...)
, просто замените его соответствующим тегом <a>
. В том же месте, где написано @Url.Action(...)
, замените его соответствующим URL-адресом (в этом случае нет тега <a>
).
Почему все пытаются сделать это трудным путем? Конечно, некоторые из этих подходов будут работать, но они более сложны, чем необходимо.
Хорошо, сначала - вам нужно изображение, которое поместится в вашей панели навигации. Вы можете настроить изображение с помощью атрибута css height (позволяя масштабировать ширину) или просто использовать изображение подходящего размера. Что бы вы ни решили сделать - то, как это будет выглядеть, будет зависеть от того, насколько хорошо вы измените размер своего изображения.
По какой-то причине каждый хочет прикрепить изображение внутри якоря с помощью navbar-brand
, и в этом нет необходимости. navbar-brand
применяет стили текста, которые не являются необходимыми для изображения, а также класс navbar-left
(точно так же как pull-left, но для использования в панели навигации). Все, что вам действительно нужно, это добавить navbar-left
.
<a href="#" class="navbar-left"><img src="/path/to/image.png"></a>
Вы можете даже следовать за этим с товарным знаком navbar, который появится справа от изображения.
Это зависит от того, какой высоты вы хотите, чтобы ваш логотип был.
Высота <a>
по умолчанию в панели навигации составляет 20 пикселей, поэтому если вы укажете height: 20px
на своем логотипе, он будет хорошо выровнен.
Тем не менее, для логотипа это немного мало, поэтому я выбрал следующее:
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target=".navbar-ex1-collapse">
<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" rel="home" href="#" title="Brand">
<img style="height: 30px; margin-top: -5px;"
src="/img/brand.png">
</a>
</div>
Это делает изображение высотой 30px и выравнивает изображение по вертикали, добавляя отрицательный край сверху (5px это половина разницы между отступом и размером изображения).
В качестве альтернативы вы можете изменить отступ для элемента <a>
, например:
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target=".navbar-ex1-collapse">
<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" rel="home" href="#" title="Brand" style="padding-top: 10px; padding-bottom: 10px">
<img style="height: 30px;"
src="/img/transparent-white-logo.png">
</a>
</div>
Вы должны использовать такой код:
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target=".navbar-ex1-collapse">
<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="logo" rel="home" href="#" title="Buy Sell Rent Everyting">
<img style=""
src="/img/transparent-white-logo.png">
</a>
</div>
Класс тега A должен быть «логотипом», а не navbar-брендом.
Этот код отлично работает, если вам нужно видеть бренд по центру и с автоматической шириной на панели инструментов. Он содержит функцию Wordpress для получения файла изображения по правильному пути:
<a class="navbar-brand page-scroll" rel="home"
href="#page-top" title="Title">
<img style="height: 100%; width: auto;"
src="<?php echo get_template_directory_uri();?>/img/logo.png">
При использовании LESS это работает:
@navbar-height: 150px;
@navbar-brand-vpadding: 10px;
.navbar-brand img {
height: @navbar-height - @navbar-brand-vpadding * 2;
position: absolute;
top: @navbar-brand-vpadding;
}
Ну, наконец-то у меня появилась эта проблема, вот мое решение, и я протестировал его на своем сайте во всех трех основных браузерах: Chrome, Firefox и Internet Explorer.
Прежде всего, если вы не используете текстовый логотип, полностью удалите «navbar-brand», так как я обнаружил, что именно этот класс является основной причиной того, что мое свернутое навигационное меню удвоилось.
Привет пользователю 3137032, чтобы он вел меня в правильном направлении.
Вы должны сделать настраиваемый адаптивный контейнер изображений, я назвал мой «логотипом»
Вот так выглядит HTML-код начальной загрузки:
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="@Url.Action(" Index ", "Home ")" class="logo"><img src="~/resources/images/Logo_Concept.png" /></a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>
<a href="@Url.Action(" About ", "Home ")">
<i class="glyphicon glyphicon-info-sign"></i> About
</a>
</li>
<li>
<a href="@Url.Action(" Contact ", "Home ")">
<i class="glyphicon glyphicon-phone"></i> Contact
</a>
</li>
<li>
<a href="@Url.Action(" Index ", "Products ")">
<i class="glyphicon glyphicon-tag"></i> Products
</a>
</li>
</ul>
</div>
</div>
</div>
И код CSS:
.logo img {
width: 100% \9; /*Force IE10 and below to size SVG images correctly*/
max-width: 100%;
}
@media (max-width:480px) {
.logo img {
width: 70% \9; /*Force IE10 and below to size SVG images correctly*/
max-width: 70% !important;
}
}
@media (max-width:400px) {
.logo img {
width: 75% \9; /*Force IE10 and below to size SVG images correctly*/
max-width: 75%;
}
}
@media (max-width:385px) {
.logo img {
width: 70% \9; /*Force IE10 and below to size SVG images correctly*/
max-width: 70%;
}
}
@media (max-width:345px) {
.logo img {
width: 65% \9; /*Force IE10 and below to size SVG images correctly*/
max-width: 65%;
}
}
@media (max-width:335px) {
.logo img {
width: 60% \9; /*Force IE10 and below to size SVG images correctly*/
max-width: 60%;
}
}
@media (max-width:325px) {
.logo img {
width: 55% \9; /*Force IE10 and below to size SVG images correctly*/
max-width: 55%;
}
}
@media (max-width:315px) {
.logo img {
width: 50% \9; /*Force IE10 and below to size SVG images correctly*/
max-width: 50%;
}
}
Значение в @media (max-width: x) может варьироваться в зависимости от ширины изображений вашего логотипа, у меня это 368px. Процентные доли, возможно, также должны быть изменены в зависимости от размера вашего логотипа. Первый запрос @media должен быть вашим порогом, а мой был шириной изображения (368px) + размер свернутой кнопки (44px) + около 60px, и он достиг 480px, где я начинаю масштабирование адаптивного изображения.
Пожалуйста, не забудьте удалить мой синтаксис бритвы из частей HTML. Дайте мне знать, если это решит вашу проблему, она исправит мою.
Редактировать: Извините, я пропустил вашу проблему с высотой навигационной панели. Есть несколько способов сделать это, лично я скомпилирую Bootstrap LESS с соответствующей высотой панели навигации, для своих целей я использую 70px, а высота моего изображения составляет 68 px. Второй способ сделать это - в самом файле bootstrap.css найти «.navbar» и изменить min-height: на высоту вашего логотипа.
Мое решение - добавить css "display: inline-block" в тег img.
<img style="display: inline-block; height: 30px; margin-top: -5px">
ДЕМО: jsfiddle
мой рабочий код - bootstrap 3.0.3. когда navbar-toggle, скрытое-xs оригинальное изображение логотипа.
<a class="navbar-brand hidden-xs" href="<?=$g4['path']?>/">
<img src="<?=$g4[path]?>/images/logo_opencode.gif" align=absmiddle alt="brand logo">
</a>
<a class="navbar-brand navbar-toggle" href="<?=$g4['path']?>/" style="border:0;margin-bottom:0;">
<img src="<?=$g4[path]?>/images/logo_opencode.gif" alt="brand logo" style="width:120px;">
</a>
Другой подход заключается в реализации встроенного класса Bootstrap .text-hide
наряду с .navbar-brand
для замены текста / контента бренда фоновым изображением.
CSS:
.navbar-brand{
background: url(http://example.com/your-logo-here.png) center / contain no-repeat;
width: 200px;
}
HTML:
<a class="navbar-brand text-hide" href="#">Navbar Brand</a>
Это очень последовательный метод, позволяющий центрировать изображение. Чтобы отрегулировать размер изображения, все, что вам нужно сделать, это отрегулировать ширину .navbar-brand
, поскольку высота уже установлена.
Пример с логотипом 100 пикселей x 100 пикселей, стандартный CSS:
Вычислите высоту и (верхняя отступы + нижняя отступы) логотипа. Здесь 120px (высота 100px + верхний отступ (10px) + нижний отступ (10px))
Перейти к начальной загрузке / настройке . Установите вместо navbar height 50px> 120px (50 + 70) и navbar-collapse-max-height от 340 до 410px ( 340 + 70). Скачать css.
В этом примере я использую эту навигационную панель . В navbar-brand :
<div class="navbar-header">
...
</button>
<a class="navbar-brand myLogo" href="#">
<img src="yourLogo.jpg" />
</a>
</div>...
добавить класс, например myLogo , и ] img (ваш логотип)
<a class="navbar-brand myLogo" href="#"><img src="yourLogo.jpg" /></a>
.
Добавить CSS
.myLogo {padding: 10px; }
Подходят для других размеров.
У меня была такая же проблема. Я решил это так:
<a href="#" class="btn btn-link navbar-btn">
<img class="img-responsive" src="#">
</a>
Нет класса navbar-brand. Результат выглядит как изображение логотипа, которое соответствует navbar и работает как ссылка. Также я рекомендую использовать класс navbar-right для пунктов меню, чтобы они не опускались ниже логотипа.
<div class="collapse navbar-collapse navbar-right">
<ul class="nav navbar-nav" role="navigation">
<li><a href="#">Item1</a></li>
<li><a href="#">Item2</a></li>
</ul>
</div>
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target=".navbar-ex1-collapse">
<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" rel="home" href="#" title="Buy Sell Rent Everyting">
<img style="max-width:100px; margin-top: -7px;"
src="/img/transparent-white-logo.png">
</a>
</div>
<header class="navbar navbar-inverse header-outer" role="banner">
<div class="container form-inline">
<img src="@Url.Content(" ~/Content/img/Logo-Sample.png ")" alt="Image" id="logo" class="img-responsive pull-left" />
<div class="pull-right padding-top">
<form class="hidden-xs" role="form">
<div class="form-group" style="padding-left:10px">
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Username">
</div>
<div class="form-group">
<input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
</div>
<div class="form-group navbar-remember">
<label class="white-font">
<input type="checkbox" class="white-font"> Remember me
</label>
</div>
<button type="button" class="btn btn-primary form-group" title="Sign In">Sign In</button>
</form>
</div>
</div>
</header>
Пожалуйста, поймите код самостоятельно: D Это мой черновой код, и он уже работает :) Вот скриншот.
Вместо замены текстового брендинга я разделил на две строки, как показано в коде ниже, и присвоил img-responsive
класс изображению ......
<div class="collapse navbar-collapse navbar-ex1-collapse" style="background: #efefef; height:auto;">
<div class="container" style="margin-bottom:-1px;">
<div class="row">
<div class="col-md-3">
<div id="menubar-logo">
<a href="index.html"><img src="img/tl_logo.png" class="img-responsive" alt="Triple Luck IT Service Logo"></a>
</div>
</div>
<div class=" col-md-offset-3 col-md-6">
<ul class="nav navbar-nav">
<li><a href="index.php" class="active">Home</a></li>
<li><a href="about_us.php">About Us</a></li>
<li><a href="contact_us.php">Contact Us</a></li>
</ul>
</div>
</div>
<!-- end of "row" -->
</div>
<!-- end of "container" -->
</div>
<!-- end of "collapse" -->
и, кроме того, я добавил следующие коды CSS .......
#menubar-logo img {
margin-top: 10px;
margin-bottom: 20px;
margin-right: 10px;
}
Если мой код решит вашу проблему, я с удовольствием .....
Может быть, это слишком просто, но я просто скопировал строку бренда navbar, чтобы их было два, изображение и затем текст.
<a class="navbar-brand" href="index.php"><img class="img-responsive" src="images/my-icon.png" width="30" height="25" alt=" "></a>
<a class="navbar-brand" href="index.php">My Brand</a>
И я создал изображение, которое помещается внутри панели навигации (примерно на 1/2 высоты).
Мой подход заключается в том, чтобы включить ЧЕТЫРЕ разных изображения разных размеров для телефонов, планшетов, настольных ПК, больших настольных ПК, но показывать только ОДИН, используя отзывчивые служебные классы начальной загрузки, как указано ниже:
<!--<a class="navbar-brand" href="<?php echo home_url(); ?>/"><?php bloginfo('name'); ?></a>-->
<a class="navbar-brand visible-xs" href="<?php echo home_url(); ?>/"><img src="/assets/logo-phone.png" alt="<?php bloginfo('name'); ?> Logo" /></a>
<a class="navbar-brand visible-sm" href="<?php echo home_url(); ?>/"><img src="/assets/logo-tablet.png" alt="<?php bloginfo('name'); ?> Logo" /></a>
<a class="navbar-brand visible-md" href="<?php echo home_url(); ?>/"><img src="/assets/logo-desktop.png" alt="<?php bloginfo('name'); ?> Logo" /></a>
<a class="navbar-brand visible-lg" href="<?php echo home_url(); ?>/"><img src="/assets/logo-large.png" alt="<?php bloginfo('name'); ?> Logo" /></a>
Примечание. Вы можете заменить закомментированная строка с предоставленным кодом. Замените php-код, если вы не используете WordPress.
Редактировать Примечание 2: Да, это добавляет запросы на ваш сервер при загрузке страницы, что может немного замедлиться, но если вы используете метод фонового спрайта css, скорее всего, логотип не будет напечатан при печати страницы и кода выше должно улучшиться SEO.
Я также реализую это через свойство фона CSS. Работает нормально при любом значении ширины.
.navbar-brand{
float:left;
height:50px;
padding:15px 15px;
font-size:18px;
line-height:20px;
background-image: url("../images/logo.png");
background-repeat: no-repeat;
background-position: left center
}
Я использую img-отзывчивый класс и затем устанавливаю max-width для элемента a
. Как это:
<nav class="navbar">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img class="img-responsive" src="mylogo.png">
</a>
</div>
</nav>
и CSS:
.navbar-brand {
max-width: 50%;
}
Быстрое исправление : создайте класс для своего logo
и установите для height
значение 28px
. Это хорошо работает с navbar на всех устройствах. Обратите внимание, я сказал, что работает "ХОРОШО".
.logo {
display:block;
height:28px;
}
Пожалуйста, попробуйте следующий код:
<style>
.navbar a.navbar-brand {padding: 9px 15px 8px; }
</style>
<a class="navbar-brand" href="#">
<img src="http://placehold.it/140x34/000000/ffffff/&text=LOGO" alt="">
</a>
Хотя ваш вопрос интересен, я не ожидаю, что будет один ответ на него. Может быть, ваш вопрос слишком широк. Ваше решение должно зависеть от: другого содержимого в панели навигации (количества элементов), размеров вашего логотипа, должен ли ваш логотип действовать адаптивно и т. Д. Добавление логотипа в букву a (с брендом navbar) кажется хорошей отправной точкой. Я должен использовать класс navbar-brand, потому что это добавит отступ (верх / низ) 15 пикселей.
Я проверяю эту настройку на http://getbootstrap.com/examples/navbar/ с логотипом 300x150 пикселей.
Полный экран> 1200:
между 768 и 992 пикселями (меню не свернуто):
< 768 (меню свернуто)
Кроме эстетических аспектов я не нашел никаких технических проблем. На маленьких экранах большой логотип может перекрывать или разрушать область просмотра. Экраны размером от 768 до 992 пикселей также имеют другие проблемы, когда содержимое не помещается в линию, см., Например: https://github.com/bassjobsen/jamedo-bootstrap-start-theme/issues/18
Панель навигации по умолчанию имеет strike> В примере панели навигации по умолчанию добавляется нижнее поле в 30 пикселей, поэтому содержимое панели навигации никогда не должно перекрывать содержимое вашей страницы. (У фиксированных панелей навигации будут проблемы при изменении высоты панели навигации).
Вам понадобятся некоторые CSS и медиа-запросы, чтобы адаптировать навигационную панель к вашим потребностям на экранах разных размеров. Пожалуйста, попробуйте сузить свой вопрос. быть. опишите проблему, которую вы обнаружили на Android.
Обновление , см. http://bootply.com/77512 для примера.
На меньших экранах, таких как телефон, свернутое меню появляется над логотипом
поменяйте местами кнопку и логотип в вашем коде, сначала логотип (установите поплавок: слева от логотипа )
Невозможно выровнять пункты меню по чему-либо, кроме верхнего
установить margin-top
для .navbar-collapse ul
. Используйте высоту логотипа минус высота панели навигации, чтобы выровнять по дну или (высота логотипа - высота панели навигации) / 2 по центру
Вы можете попробовать использовать запрос @media, как показано ниже.
Сначала добавьте класс логотипа, а затем используйте @media, чтобы указать высоту и ширину логотипа для каждого размера устройства. В приведенном ниже примере я нацеливаюсь на устройства с максимальной шириной 320 пикселей (iPhone). Вы можете поэкспериментировать с этим до тех пор, пока не найдете наилучшее соответствие. Простой способ проверки: используйте Chrome или Firefox с проверяющим элементом. Сократите ваш браузер как можно дальше. Обратите внимание на изменение размера логотипа в зависимости от заданной вами максимальной ширины @media. Проведите тестирование на iPhone, устройствах Android, iPad и т. Д., Чтобы получить желаемые результаты.
.logo {
height: 42px;
width: 140px;
}
@media (max-width:320px) {
.logo {
height: 33px;
width: 110px;
}
}
В настоящее время в Mozilla есть ошибка , которую я обнаружил , которая разбивает навигационную панель при определенной ширине браузера с помощью МНОГО ДЕМО НА ЭТОЙ СТРАНИЦЕ . По сути, ошибка Mozilla включает в себя левый и правый отступы на ссылку бренда Navbar как часть ширины изображения. Тем не менее, это можно легко исправить, и я проверил это, и я уверен, что это самый стабильный рабочий пример на этой странице. Он автоматически изменит размер и работает во всех браузерах.
Просто добавьте это в свой css и используйте марку navbar так же, как и .img-responsive
. Ваш логотип будет автоматически соответствовать
.navbar-brand {
padding: 0px; /* firefox bug fix */
}
.navbar-brand>img {
height: 100%;
padding: 15px; /* firefox bug fix */
width: auto;
}
Другой вариант - использовать фоновое изображение. Используйте изображение любого размера, а затем просто установите желаемую ширину:
.navbar-brand {
background: url(http://disputebills.com/site/uploads/2015/10/dispute.png) center / contain no-repeat;
width: 200px;
}
<час>
Люди, кажется, много забывают о подгонке объектов. Лично я считаю, что с ним проще всего работать, потому что изображение автоматически подстраивается под размер меню. Если вы просто используете подгонку объекта к изображению, он автоматически изменит размеры до высоты меню.
.navbar-brand > img {
max-height: 100%;
height: 100%;
-o-object-fit: contain;
object-fit: contain;
}
Было отмечено, что это не работает в IE "пока". Существует polyfill , но это может быть чрезмерно, если вы не планируете использовать его для чего-либо еще. Похоже, подгонка объекта планируется , планируется для будущего выпуска IE, поэтому, как только это произойдет, это сработает во всех браузерах.
Однако, если вы заметили, что .img-отзывчивый класс в начальной загрузке, максимальная ширина предполагает, что вы помещаете эти изображения в столбцы или что-то, что имеет явное с set. Это будет означать, что 100% означает 100% ширину родительского элемента.
.img-responsive
max-width: 100%;
height: auto;
}
Причина, по которой мы не можем использовать это с панелью навигации, заключается в том, что родительский элемент (.navbar-brand) имеет фиксированную высоту 50 пикселей, но ширина не установлена.
Если мы возьмем эту логику и перевернем , чтобы она была отзывчивой на основе высоты, мы можем получить адаптивное изображение, которое масштабируется до высоты .navbar-brand, добавляя и автоматически устанавливая ширину. будет приспосабливаться к пропорции.
max-height: 100%;
width: auto;
Обычно нам нужно добавить display:block;
к сценарию, но так как у navbar-brand уже есть float: left; Применительно к нему он автоматически действует как блочный элемент.
Вы можете столкнуться с редкой ситуацией, когда ваш логотип слишком маленький. Подход img-отзывчивый не принимает это во внимание, но мы будем. Также добавив атрибут «height» в .navbar-brand > img
, вы можете быть уверены, что он будет увеличиваться и уменьшаться.
max-height: 100%;
height: 100%;
width: auto;
Итак, чтобы завершить это, я собрал их вместе, и, похоже, он отлично работает во всех браузерах.
<style type="text/css">
.navbar-brand>img {
max-height: 100%;
height: 100%;
width: auto;
margin: 0 auto;
/* probably not needed anymore, but doesn't hurt */
-o-object-fit: contain;
object-fit: contain;
}
</style>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="http://disputebills.com"><img src="http://disputebills.com/site/uploads/2015/10/dispute.png" alt="Dispute Bills"></a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</div>
</nav>