Dostosuj obraz logo za pomocą Bootstrap

Question

Używam programu startowego do nagłówka strony. Jeśli chciałbym, aby logo witryny było responsywne, czy powinienem mieć dwa obrazy logo (jeden na komputer i na telefon komórkowy), czy też zmienić rozmiar mojego logo graficznego? jaki jest najlepszy sposób, aby go zdobyć? Dzięki. To mój kod:

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

Answer 1

Nie sądzę, że istnieje jedna odpowiedź na to pytanie, ale postaram się rzucić trochę światła na twoje opcje.

Za pomocą programu Bootstrap można dodać do obrazu klasę .img-responsive, aby zmienić jej rozmiar wraz z szerokością strony. Według Bootstrap's documentation:

Obrazy w Bootstrap 3 może być czuły w obsłudze poprzez dodanie klasy .img-responsive. To odnosi się do obrazu, aby ładnie pasował do elementu nadrzędnego.

Teraz zrobię to krok dalej - mając dwa różne obrazy. Nie jest tak bardzo w przypadku komputerów stacjonarnych i komórkowych, jak i rozdzielczości ekranu. Ekrany Retina będą wyświetlały obrazy o wyższej rozdzielczości, na przykład. Wiele osób zapewnia dwa różne obrazy, jeden w normalnej rozdzielczości i jeden podwójny, który jest wyświetlany na ekranach siatkówki.

This tutorial podkreśla niektóre sposoby wytwarzania obrazów dla ekranów Retina, w tym zapewnienie jeden obraz źródłowy, który jest następnie za pomocą CSS downsized lub zapytań o media zmienić src obrazu. Dodam również, że używanie CSS Media Queries do zmiany src obrazu nie musi oznaczać, że użytkownik będzie musiał pobrać dwie wersje tego samego obrazu.

Answer 2

dodać klasę

img-responsive 

do obrazu

Dodawanie dwa obrazy powinny być lepsze. Ale wiele przeglądarek nie rozpoznaje, że twój mniejszy obraz jest responsywny (mam nadzieję, że wkrótce to się zmieni). Więc będą musieli załadować 2 obrazy. Który jest cięższy (i wolniejszy) do załadowania.

Na razie jeszcze lepiej jest dodać klasę do obrazu.

Answer 3

W bootstrapie jest klasa, dzięki której obrazy są responsywne.

Klasa jest img-responsive

Dodaj to do swojej img tag a obraz stanie się elastyczne.

Answer 4

Klasa reakcji responsywnych Bootstrap ustawia maksymalną szerokość na 100%. Ogranicza to jego rozmiar, ale nie zmusza go do rozciągnięcia w celu wypełnienia elementów nadrzędnych większych niż sam obraz. Aby wymusić skalowanie, musisz użyć atrybutu width.

http://getbootstrap.com/css/#images-responsive

dzięki Isherwood DEMO

<img src="http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg" class="img-responsive" alt="Responsive image"> 

Answer 5

Gdzie masz obraz teraz, przy użyciu height: 100%, a szerokość: Auto, powinien zachować go do rozmiaru paska nawigacyjnego. Pasek nawigacyjny ma domyślnie 50 pikseli na każde urządzenie, jakie masz.

Answer 6

unieważnienie tej klasy

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