Forum : Logo responsif

Bonjour,
Voila je rencontre un petit problème avec mon code

<div id="header" class="container-fluid hidden-xs">
  <div class="row art"> 
    <div class="col-sm-2 col-md-2 hidden-xs marge"> 
       <a href="http://www.exemple.fr"><div class="logo"></div></a>
     </div>
...

...
#header{
 height:19%;
 border-bottom:1px solid white;
}

.logo{
  float:left;
  width:120px;
  height:92px;
  background:url(../img/logo.gif);
  margin:0.5% 0 0 15%;
}
...

Bonjour,

mon problème c'est l' histoire de comment adapter un logo (un fichier image) pour qu'il s'affiche de façon propre sur tous les écrans lorsque la zone dans laquelle se trouve l'image est changeante suivant l'écran : lorsque la hauteur de la zone dans laquelle se trouve l'image est exprimée en % la taille de cette zone va donc fatalement varier suivant la taille de l'écran, de plus la largeur de cette zone est exprimée avec Bootstrap donc le problème est exactement le même avec la largeur qu'avec la hauteur. Voici le problème résumé avec des mots, le code associé est un peu plus haut.

Il y a la solution d'exprimer la height du logo en % par rapport au parent, c'est en théorie une solution correcte mais en pratique l'image se déforme lorsque la zone d'affichage de cette image devient grande sur les grands écrans. Donc à rejeter.

Je pense que le lien suivant apporte des solutions au problème et qu'il n' y a pas d'autres solutions de possibles à part celles-ci, qu'en pensez vous?

http://blog.nursit.net/Adaptive-Images-et-Responsive-Web.html

4 réponses

Benjamin Derepas

Ton problème en gros c'est de rendre responsive une image ?

img{
 max-width:100%;
 height:auto;
 }

Tu peux aussi regarder de ce coté

web75

Auteur

Le code que tu apportes ne correspond pas à mon problème, mais merci quand même de t'être dérangé.

JeremieMeunier

Je te propose d'utiliser des @media
C'est ce que j'ai fait sur mon site

<div id="header" class="container-fluid hidden-xs">
  <div class="row art"> 
    <div class="col-sm-2 col-md-2 hidden-xs marge"> 
       <a href="http://www.exemple.fr"><img src="ton_image.png" class="logo" alt="" /></a>
</div>

Qui se design ainsi

#header
{
    height: 50px;
    border-bottom: 1px solid #fff;
}

.logo
{
    display: block;
    width: 50px;
    height: 50x;
}
@media all and (max-device-width: 1024px)
{
    #header
    {
        height: 15px;
    }
    .logo
    {
        width: 25px;
        height: 25px;
    }
}

En espérant t'avoir aider !

Lartak

Bonjour.

Tu peut aller voir l'adaptative d'une image sur www.bearproject.fr.nf/lab

Si tu pouvais arrêter de nous donner des liens de ton site qui n'est pas accessible, ce serait bien.