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

Résolu/Fermé
Stanislas Poisson Messages postés 423 Date d'inscription samedi 1 décembre 2012 Statut Membre Dernière intervention 22 mai 2018 - 15 déc. 2012 à 09:55
Stanislas Poisson Messages postés 423 Date d'inscription samedi 1 décembre 2012 Statut Membre Dernière intervention 22 mai 2018 - 16 déc. 2012 à 12:08
#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
}
A voir également:

5 réponses

gardiendelanuit Messages postés 1770 Date d'inscription jeudi 20 décembre 2007 Statut Membre Dernière intervention 19 novembre 2016 264
Modifié par gardiendelanuit le 15/12/2012 à 10:41
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.
0
Stanislas Poisson Messages postés 423 Date d'inscription samedi 1 décembre 2012 Statut Membre Dernière intervention 22 mai 2018 66
15 déc. 2012 à 10:51
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.
0
gardiendelanuit Messages postés 1770 Date d'inscription jeudi 20 décembre 2007 Statut Membre Dernière intervention 19 novembre 2016 264
Modifié par gardiendelanuit le 15/12/2012 à 11:10
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.
0
Stanislas Poisson Messages postés 423 Date d'inscription samedi 1 décembre 2012 Statut Membre Dernière intervention 22 mai 2018 66
15 déc. 2012 à 11:14
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.
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Stanislas Poisson Messages postés 423 Date d'inscription samedi 1 décembre 2012 Statut Membre Dernière intervention 22 mai 2018 66
15 déc. 2012 à 13:19
Up anybody can help me to fix if it's the browser or the css?
0
Stanislas Poisson Messages postés 423 Date d'inscription samedi 1 décembre 2012 Statut Membre Dernière intervention 22 mai 2018 66
16 déc. 2012 à 10:42
Je re up, dans l'espor que l'un de nos développeurs css parvienne à trouver comment uniformiser ce leger bug inter-browser

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;
}
0
gardiendelanuit Messages postés 1770 Date d'inscription jeudi 20 décembre 2007 Statut Membre Dernière intervention 19 novembre 2016 264
Modifié par gardiendelanuit le 16/12/2012 à 11:18
0
Stanislas Poisson Messages postés 423 Date d'inscription samedi 1 décembre 2012 Statut Membre Dernière intervention 22 mai 2018 66
16 déc. 2012 à 11:19
oui, le js est toujours une option mais pour cela, il faut que le js sache si l'image existe ou pas...
0
gardiendelanuit Messages postés 1770 Date d'inscription jeudi 20 décembre 2007 Statut Membre Dernière intervention 19 novembre 2016 264
Modifié par gardiendelanuit le 16/12/2012 à 11:48
Charge la en javascript alors ;)
var myNewImage = new Image();
     myNewImage.src="mon_url.jpg";
   
     if ( myNewImage.complete){
       myImage.src = myNewImage.src
     }
 else {
       //modification des tes styles
     }
0
Stanislas Poisson Messages postés 423 Date d'inscription samedi 1 décembre 2012 Statut Membre Dernière intervention 22 mai 2018 66
16 déc. 2012 à 11:59
Ben non... je veux faire un site fonctionnel en brut sans le js. JavaScript est a mon sens, un plus a apporter afin de permettre des interaction plus souple et moins de deplacement dans le site. Mais pour le referencement, il faut mieux avoir un site bien construit et bien fabriquer afin que tout les informations se trouve essus sans avoir bessoin du JavaScript.
0