Forum : Problème de résolution entre les navigateurs

Réponse acceptée

Je pense que c'est un problème de redimensionnement de l'image du au max-width:100% essaie par un width:100%
J'ai remarqué que pour utiliser un max-width avec pourcentage comme valeur, il faut d'abord lui définir une taille avec width.

Sinon voici un petit bout de code a essayer :

/**************************************************
Test 1
**************************************************/
.ubermenu-image{
    height: auto;
    max-width: 31px;
    width: 100%;
    line-height: 0px;
    display: block; /** ou inline-block **/
}

/**************************************************
Test 2
--------------------------
Bon c'est de la bidouille mais rendu assuré je pense 
!! À Utiliser si tu n'as pas le choix ou sur peux d'éléments ou des éléments d'interface, sinon pour le référencement tu perds une image et son attribut alt.

En utilisant ceci je n'ai jamais eu de problème de rendu sur les images, mon patron étant très pointilleux sur le rendus des images cette technique à toujours convaicu et passe très bien sur IE 8 et +
**************************************************/
a.ubermnu-target{
    display: block;
    width: 31px;
    height: 30px;
    background-image: url('monimage.png'); /** A changer **/
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center center;

    overflow: hidden; /** Utilise pour l'exemple du dessous **/
}

a.ubermnu-target img{
    opacity: 0;
    width: 100%;
    height: auto; /** meme si l'image dépasse c'est pas grave, grace à l'overflow hidden de l'élément parent a.ubermnu-target */
}

brelandas

Salut Elano, aurais une adresse pour passer un coup de debugger dessus ?

Benjamin Derepas

Comment affiches tu les images ? as tu des règles hdpi, srcet ? Un fichier .htaccess peut être ?

Monkey_Meteor

Auteur

Bonjour,
Pour le site je peux vous passer un lien mais comme je boss dessus celui-ci est en maintenance actuellement le temps que les travaux soient terminés donc pour que vous puissiez y accéder il me faut votre adresse ip ^^'

Pour ce qui est des règles d'affichage des images (hdpi etc...) je n'en ai pas mis (j'utilise le plugin ubermenu pour les mettre en place sur la barre de navigation donc peut-être que ce plugin utilise certaines règles d'affichage que je n'ai pas vu.) Ces images sont des icônes qui sont assez grandes que j'ai réduites à 30px et 60px vous pouvez retrouver l'icône de la navigation à cette adresse :
http://www.lfstrat.com/wp-content/uploads/2016/09/logo_lfstrat_white_network.png

mon fichier htaccess est pour l'instant tout ce qu'il y a de plus basique je n'ai pas encore ajouté de règles supp. autres que celles de wordpress multisite et redirection 404 ^^'

Cordialement.

brelandas

Ha mince je ne peux pas te filer l'ip pour l'instant ( au boulot ).
Peux-tu m'envoyer les règles css de l'image ? (via le debugger, un screen ou un copié collé )

Monkey_Meteor

Auteur

Premiere partie : http://nsa38.casimages.com/img/2016/09/14/160914035013316923.png
suite du css : http://nsa37.casimages.com/img/2016/09/14/160914035005830274.png

Monkey_Meteor

Auteur

Merci ! :D
J'ai testé votre code et j'ai du pas mal bidouiller le plugin ubermenu car c'est bien le plugin qui pose problème pour l'affichage des images sur Chrome et Edge je ferais un ticket sur leur site pour les prévenir du soucis ^^

Du coup ce que j'ai fais, c'est que j'ai ajouté une classe au "a.ubermenu-target" et j'ai modifier en fonction de cette nouvelle class car si je retire l'image du menu c'est tout qui dissparait (le link "a" comme si ça n'existait plus du tout) :/ et pas que l'image.

Du coup voici mon nouveau code ^^ :

/* Navigation network LF */
#menu-item-4338 {
    margin-top: 6px;
    padding-right: 7px;
}
a.lf_white_logo {
    display: block !important;
    width: 33px !important;
    height: 32px !important;
    background-image: url('http://www.lfstrat.com/wp-content/uploads/2016/09/logo_lfstrat_white_network.png') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    overflow: hidden !important;
}
a.lf_white_logo img.ubermenu-image{
    display: none;
}

J'ai donc repris votre code mais en cachant l'image du menu pour pouvoir garder le link sans problème du coup bon ça fait bien bidouillage oui mais bon comme on dit "si ça marche, touche plus!" lol

Merci beaucoup du coup, et bonne soirée!
Cordialement.

Problème de résolution entre les navigateurs

7 réponses