web-dev-qa-db-fra.com

Rendre l'image du logo sensible à l'aide de Bootstrap

J'utilise bootstrap pour un en-tête de site. Si je souhaite que le logo du site Web soit réactif, dois-je avoir deux images de logo (une pour le bureau et une pour le mobile) ou dois-je redimensionner le logo de mon image? Quel est le meilleur moyen de l'obtenir? Merci . C'est mon code:

 <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>
htmlcsstwitter-bootstrapresponsive-designnavbar
13
D.B

Je ne pense pas qu'il y ait une seule réponse à cette question, mais je vais essayer de faire la lumière sur vos options.

Avec Bootstrap, vous pouvez ajouter la classe .img-responsive à l'image afin de la redimensionner avec la largeur de la page. Selon la documentation de Bootstrap :

Les images dans Bootstrap 3 peuvent être rendues réactives grâce à l’ajout de la classe .img-responsive. Ceci applique max-width: 100%;, height: auto; et display: block; à l'image afin qu'elle s'adapte bien à l'élément parent.

Maintenant, je vais faire un pas de plus - avoir deux images différentes. Ce n'est pas tant pour Desktop vs Mobile que c'est la résolution de l'écran. Les écrans Retina afficheront des images avec une résolution supérieure, par exemple. De nombreuses personnes fournissent deux images différentes, une à résolution normale et une double pour les écrans de rétine. 

Ce tutoriel met en évidence certaines méthodes de préparation de vos images pour les écrans Retina, notamment en fournissant une image source qui est ensuite réduite ou en utilisant des requêtes de média CSS pour modifier la src de l'image. J'ajouterai également que le fait d'utiliser CSS Media Queries pour modifier la src de l'image ne signifie pas nécessairement que l'utilisateur devra télécharger deux versions de la même image.

14
Tim McClure

La classe d'images réactives de Bootstrap définit la largeur maximale sur 100%. Cela limite sa taille mais ne l'oblige pas à s'étirer pour remplir des éléments parents plus grands que l'image elle-même. Vous devrez utiliser l'attribut width pour forcer la conversion ascendante.

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

grâce à isherwood D&EACUTE;MO

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

ajouter la classe

img-responsive

à votre image

Ajouter deux images devrait être mieux. Mais beaucoup de navigateurs ne reconnaissent pas que votre image plus petite est pour la réactivité (espérons que cela changera bientôt). Ils devront donc charger 2 images. Ce qui est plus lourd (et plus lent) à charger.

Pour le moment, il est toujours préférable d’ajouter la classe à votre image.

2
Danny van Holten

Où vous avez maintenant l'image, en utilisant height: 100% et width: auto, gardez-la à la taille de la barre de navigation. La barre de navigation a une hauteur de 50 pixels par défaut, quel que soit le périphérique que vous possédez. 

2
spasticninja

Remplacer cette classe 

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

Dans le bootstrap, il existe une classe pour rendre les images réactives.

La classe est img-responsive

Ajoutez ceci à votre tag img et l'image deviendra sensible.

1
Saiyam Gambhir

Je préfère une autre solution. Créez une autre classe appelée logo-navbar:

<a class="navbar-brand js-scroll-trigger" href="#page-top">
    <img class="logo-navbar" src="img/logo-1-img-black.png">
</a>

Et appliqué une largeur relationnelle avec la taille de police du menu:

img.logo-navbar {
    width: 2rem !important;
    height: 2rem !important;
}

De cette façon, votre logo sera toujours adapté au contenu de votre barre de navigation.

0
cbcram