[css] 로고가있는 부트 스트랩 3 Navbar

많은 예제와 함께 완벽한 데모

중요 업데이트 : 12/21/15

이 페이지에서 MANY DEMOS를 사용하여 특정 브라우저 너비에서 탐색 모음을 손상 시키는 버그가 Mozilla에서 발견되었습니다 . 기본적으로 모질라 버그는 이미지 너비의 일부로 탐색 막대 브랜드 링크의 왼쪽 및 오른쪽 패딩을 포함합니다. 그러나 이것은 쉽게 고칠 수 있으며 이것을 테스트 했으며이 페이지에서 가장 안정적인 작업 예라고 확신합니다. 자동으로 크기가 조정되며 모든 브라우저에서 작동합니다.

CSS에 이것을 추가하고 원하는 방식으로 navbar-brand를 사용하십시오 .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 응답 클래스를 발견하면 max-width는 이러한 이미지를 열 또는 세트가있는 명시 적 인 이미지에 넣었다고 가정합니다. 이는 100 %가 특히 상위 요소의 100 % 너비를 의미 함을 의미합니다.

    .img-responsive
        max-width: 100%;
        height: auto;
    }

우리가 navbar와 함께 사용할 수없는 이유는 부모 (.navbar-brand)의 고정 높이가 50px이지만 너비가 설정되어 있지 않기 때문입니다.

우리는 그 논리를 가지고있는 경우 역 이 높이에 따라 반응하는 것으로 우리는 .navbar 브랜드 높이 추가 및 자동 설정에 의해 스케일이 비율로 조정됩니다 폭 있다는 응답 이미지를 가질 수 있습니다.

max-height: 100%;
width: auto;

일반적으로 display:block;시나리오 에 추가 해야하지만 navbar-brand에는 이미 float : left가 있으므로; 그것에 적용되면 자동으로 블록 요소로 작동합니다.

로고가 너무 작은 드문 상황이 발생할 수 있습니다. img-responsive 접근법은 이것을 고려하지 않지만 우리는 할 것입니다. “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>

데모 http://codepen.io/bootstrapped/pen/KwYGwq

답변

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

.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%;
}
}

<img style="display: inline-block; height: 30px; margin-top: -5px">