img{min-width/height} //cross-browser Résolu/Fermé

Question

#BonjourLesDevs{
    Description : Background-image(image pour le cas où l'image ne s'affiche pas) 0 0 no-repeat;
    Problème : min-width && min-height sur balise img non pris en compte par tous les navigateurs;
    Détaille : img{min-width:200px;min-height:50px;} chrome: min-width:ok min-height:no Firefox: min-width:no min-height:ok;
    Question : Avez vous une idée qui permette de définir proprement les dimensions minimal et maximale d'une image (quand elle ne s'affiche pas) et qui soit cross-browser?
    Remerciement : Merci de votre attention et bonne journée
}

gardiendelanuit · Answer

Bonjour, 
Je ne vois pas pourquoi ses propriétés ne seraient pas cross-browser: sous chrome, netScape, IE8+ et mozi ça marche très bien chez moi..  
On peut voir l'ensemble du code qui pause problème? 
  
Merci de mettre "Résolu" quand le problème est réglé! 
La connaissance c'est comme la confiture: moins on en a et plus on l'étale.

Stanislas Poisson · Answer

Bonjour,

Voici déja le screen compiler avec en haut l'affichage sous chrome et en bas celui sous firefox (ie je m'en tape pour le moment :p)
https://docs.google.com/open?id=0B7lFbppRSSU2ZFc4RWtrdzdHMkE

ensuite, pour le code, cela donne ceci:


#middle section article img{
    background:#138d81 url(bg.png) bottom center no-repeat;
    background-size:100% 100%;
    min-width:200px;
    min-height:50px;
    border:4px solid #fff;
    border-radius:10px;
    box-shadow:0 0 1px #000;
    max-width:700px;
    max-height:400px;
    display:block;
    margin:0 auto 10px;
}


Comme on peut le voir, l'affichage n'est pas du tout le meme.
Chrome semble prendre en compte le min-width:200px mais le copie colle sur le min-height
Firefox semble prendre le min-height et pas du tout le min-width.

Les deux prennent bien les paramètres max-width/height.

Peut être qu'il s'agit de paramètres par défaut des navigateurs mais si c'est possible de faire du forcing.

gardiendelanuit · Answer

Je vois ce que tu veux faire et dans ces cas là les propriétés de ce genre peuvent poser problème, mais je viens de tester tout ça et de mon coté ça ne semble pas avoir de problème à part que chrome prend la valeur maximal pour width et minimal pour height (donc min-height et max- width).
Si tu peux passer par php, il est meilleur de ne pas les utiliser en utilisant quelques astuces.
   
Merci de mettre "Résolu" quand le problème est réglé!  
La connaissance c'est comme la confiture: moins on en a et plus on l'étale.

Stanislas Poisson · Answer

Bne justement, chez moi c'est chrome qui prend la valeur min-width et la colle sur le min-height et firefox qui prend en compte seulement la valeur de min-height et pas de min-width. Enfin, ca a l'air de pas passer comme il faut sur les nav, ca doit etre une propiete a la nopix a laquel on ne peut pas changer grand chose.

Stanislas Poisson · Answer

Up anybody can help me to fix if it's the browser or the css?

Img{min-width/height} //cross-browser

5 réponses

Discussions similaires