CẬP NHẬT QUAN TRỌNG: 21/12/15
Hiện tại có một lỗi trong Mozilla tôi đã phát hiện ra rằng phá vỡ thanh điều hướng trên một số độ rộng trình duyệt nhất định với NHIỀU DEMOS TRÊN TRANG NÀY . Về cơ bản, lỗi mozilla bao gồm phần đệm bên trái và bên phải trên liên kết thương hiệu navbar như một phần của chiều rộng hình ảnh. Tuy nhiên, điều này có thể được khắc phục dễ dàng và tôi đã thử nghiệm điều này và tôi khá chắc chắn đó là ví dụ hoạt động ổn định nhất trên trang này. Nó sẽ tự động thay đổi kích thước và hoạt động trên tất cả các trình duyệt.
Chỉ cần thêm nó vào css của bạn và sử dụng navbar-brand giống như cách bạn muốn .img-responsive. Logo của bạn sẽ tự động phù hợp
.navbar-brand {
padding: 0px; /* firefox bug fix */
}
.navbar-brand>img {
height: 100%;
padding: 15px; /* firefox bug fix */
width: auto;
}
Một lựa chọn khác là sử dụng hình nền. Sử dụng một hình ảnh có kích thước bất kỳ và sau đó chỉ cần đặt chiều rộng mong muốn:
.navbar-brand {
background: url(http://disputebills.com/site/uploads/2015/10/dispute.png) center / contain no-repeat;
width: 200px;
}
CÂU TRẢ LỜI GỐC DƯỚI ĐÂY (chỉ để tham khảo)
Mọi người dường như quên đi đối tượng phù hợp rất nhiều. Cá nhân tôi nghĩ rằng đó là cách dễ nhất để làm việc vì hình ảnh tự động điều chỉnh theo kích thước menu. Nếu bạn chỉ sử dụng đối tượng vừa với hình ảnh, nó sẽ tự động thay đổi kích thước theo chiều cao của menu.
.navbar-brand > img {
max-height: 100%;
height: 100%;
-o-object-fit: contain;
object-fit: contain;
}
Nó đã chỉ ra rằng điều này không hoạt động trong IE "chưa". Có một polyfill , nhưng điều đó có thể quá mức nếu bạn không có kế hoạch sử dụng nó cho bất cứ điều gì khác. Có vẻ như sự phù hợp với đối tượng đang được lên kế hoạch cho phiên bản IE phát hành trong tương lai nên một khi điều đó xảy ra, nó sẽ hoạt động trong tất cả các trình duyệt.
Tuy nhiên, nếu bạn nhận thấy lớp .img-responsive trong bootstrap, độ rộng tối đa giả định rằng bạn đang đặt những hình ảnh này trong các cột hoặc một cái gì đó có một bộ rõ ràng với bộ. Điều này có nghĩa là 100% cụ thể có nghĩa là 100% chiều rộng của phần tử cha.
.img-responsive
max-width: 100%;
height: auto;
}
Lý do chúng tôi không thể sử dụng điều đó với thanh điều hướng là vì cha mẹ (.navbar-brand) có chiều cao cố định là 50px, nhưng chiều rộng không được đặt.
Nếu chúng ta sử dụng logic đó và đảo ngược nó để phản hồi dựa trên chiều cao, chúng ta có thể có một hình ảnh phản hồi theo tỷ lệ chiều cao của thương hiệu .navbar và bằng cách thêm và tự động đặt chiều rộng, nó sẽ điều chỉnh theo tỷ lệ.
max-height: 100%;
width: auto;
Thông thường chúng ta sẽ phải thêm display:block;vào kịch bản, nhưng vì navbar-brand đã có float: left; áp dụng cho nó, nó tự động hoạt động như một yếu tố khối.
Bạn có thể gặp phải trường hợp hiếm hoi khi logo của bạn quá nhỏ. Cách tiếp cận phản hồi img không tính đến điều này, nhưng chúng tôi sẽ làm. Bằng cách thêm thuộc tính "chiều cao" vào, .navbar-brand > imgbạn có thể yên tâm rằng nó sẽ tăng lên cũng như xuống.
max-height: 100%;
height: 100%;
width: auto;
Vì vậy, để hoàn thành điều này, tôi đặt cả hai cùng nhau và nó dường như hoạt động hoàn hảo trong tất cả các trình duyệt.
<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>
<img src="logo.png" width="27px" />: điều chỉnh