web-dev-qa-db-fra.com

Bootstrap: Navbar Logo Size

J'ai un logo 1700x700 et ma hauteur de barre de navigation est de 70. Je voudrais redimensionner automatiquement et l'adapter à ma hauteur de barre de navigation. Je pourrais le redimensionner à 170x70 avec Photoshop mais le problème est que l'image perd de la qualité lorsque je fais un zoom avant.

J'ai essayé avec img-responsive mais cela ne fonctionne pas.

Je vous remercie!

<a class="navbar-brand" href="index.php"></a>



.navbar-brand
{
    position: relative;
    background: url(../images/logo.png);
    width: 170px;
    left: 15px;
}
twitter-bootstrapcsstwitter-bootstrap-3navbar
4
Asez

D'accord avec ABK en ce qui concerne la hauteur maximale CSS, mais je pense que JGonDev sur le redimensionnement de l'image est la bonne direction pour un point de vue de la performance. Vous ne devez vraiment utiliser CSS que pour styliser et concevoir votre site. Il ne doit pas être utilisé pour pirater votre code pour forcer le désir nécessaire.

En ce qui concerne le redimensionnement, la plupart des nouveaux développeurs n'ont pas accès à d'excellents outils de conception comme Photoshop, mais génial si vous le pouvez! Pour les utilisateurs Mac, l'aperçu fait le travail de redimensionnement des images.

Ouvrez votre image dans Aperçu - Allez dans Outils/AdjustSize:

Ensuite, vous pouvez modifier votre largeur ou hauteur à la taille souhaitée. Assurez-vous de garder l'échelle proportionnellement vérifiée! Cela garantira que votre image ne sera pas biaisée.

Après avoir redimensionné, cliquez sur le bouton "OK". Enregistrer le fichier.

** Remarque - Assurez-vous que vous enregistrez votre fichier sous un autre fichier, par exemple navbar-logo.png ou quelque chose de similaire afin que vous puissiez facilement vous rappeler à quoi doit servir l'image dans votre code.

Le redimensionnement de votre image réduira le ballonnement et la taille de votre site Web global et améliorera les performances globales de votre site.

1
Chuck Gray

vous pouvez utiliser ce css

fond: url (../ images/logo.png) centre de défilement sans répétition centre/contenir;

0
Suraj Pradhan

Donnez votre logo max-height et faites que la valeur soit la hauteur de la barre de navigation comme ceci ...

.navbar-brand
{
    position: relative;
    background: url(../images/logo.png);
    width: 170px;
    left: 15px;
    max-height: 70px; /* height of the navbar */
}
0
Abk

La barre de navigation dont vous aurez besoin
Utilisez flex avec ce justify-content justifie le contenu ajuste automatiquement les éléments en position
align-items:center, et bien c'est explicite

Ajustez-le à votre besoin mon seigneur

*,
*:before,
*:after {
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
    box-sizing: border-box;
    transition: .3s all;
}


header {
    background: #D2DCE1;
    z-index: 100;
}

nav {
    width: 100%;
    display: flex;
    padding: 5px 15px;
    justify-content: space-between;
    max-width: 1366px;
    margin: auto;
    margin-bottom: 10px;
}

#logo {
    float: left;
    width: 250px;
    height: 40px;
    background: url('https://i.imgur.com/K5bq1MD.png') left/contain no-repeat;
}
#logo:hover {
    background: url('https://i.imgur.com/Kbbcixn.png') left/contain no-repeat;
}

nav ul {
    float: right;
    display: flex;
    justify-content: space-around;
}

nav ul li {
    float: left;
    display: flex;
    margin: 0 20px 0;
    align-items: center;
    justify-content: space-around;
}

nav ul li a {
    color: #000;
    opacity: .6;
    display: block;
    font-size: 90%;
    font-weight: bold;
    font-family: Arial;
    letter-spacing: 1px;
    border-top: 1.5px solid transparent;
    border-bottom: 1.5px solid transparent;
}

.active {
    border-bottom: 1.5px solid #ff7700;
    opacity: 1;
}

nav ul li a:hover {
    opacity: 1;
}
<header id="navbar">
  <nav>
    <a id=logo href="#"></a>
    <ul>
      <li><a href="#">1</a></li>
      <li><a href="#">2</a></li>

    </ul>
  </nav>
</header>
0
Anuja Nimesh

** La réponse la plus simple à votre question est **

<a class="navbar-brand" href="index.php"></a>



.navbar-brand
{
    position: relative;
    background: url(../images/logo.png);
    width: 170px;
    height: 15px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

Si vous le trouvez utile, n'oubliez pas de mettre à jour

0
Chaitanya Mogal