Logo w navbar-header

Question

Witam mam taki problem ponieważ nie umiem wyskalować loga żeby było dobrze widoczne w navie.

Wymiary obrazu 1890x1417

Html

    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="#"><img src="/img/logo.png"/></a>
            </div>
            <ul class="nav navbar-nav">
                <li><a href="#">Home</a></li>
                <li class="active"><a href="#">About</a></li>
            </ul>
        </div>
    </nav>

CSS:

.navbar{
    font-size: 3rem;
    padding-top: 5px;
    padding-bottom: 5px;
    border-bottom: 1px solid pink;
}

 

Answer 1

Cześć :)

Jeżeli chcesz wyskalować 'logo' by zachowywało się podobnie jak to z YouTube, to ustaw wymiary na sztywno. Tu polecam na około 100px, dokładniej

    img{
      width:  100px;
      position: fixed;
      top: -15px;
     }

Natomiast jeżeli to logo to powinno mieć wymiary dostosowane pod kod, a nie kod dostosowany pod logo.

Answer 2

Nadaj obrazkowi klasę 

img-fluid

dokumentacja: https://getbootstrap.com/docs/4.0/content/images/#responsive-images

Comments

Obrazek nadal taki sam wychodzi po za divy i poza stronę

---

A przy klasie: img-responsive zamiast img-fluid?

---

Niestety także nie działa.

---

Wklej gdzieś na bina cały kod html i css

---

Masz tu z grafiką

https://www.w3schools.com/code/tryit.asp?filename=FNLHX0C2X4Y0

Answer 3

A jak te logo chcesz żeby wyglądało?

Comments

Mniej więcej coś takiego jak logo youtuba.

---

na .container-fluid daj display:flex;

ustaw tez szerokosc loga