Responsive Images n'évoluent pas avec Firefox comme la taille de l'écran est ajustée. Fonctionne dans d'autres Navigateurs

Je suis nouveau sur les images responsives, mais ont compris comment obtenir mes images à l'échelle dans Safari, Opera et Chrome (je ne sais pas sur IE) avec le code CSS suivant:

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

Que la taille de l'écran est modifiée, l'image échelles. Dans Firefox, l'image n'est pas à l'échelle, à moins que je change d'width:auto, largeur:100%; Puis Safari scrunches l'image pour rien au moment de charger ou de recharger; bien que, la compensation de trésorerie rend pleine taille. Je suis en train de travailler sur Drupal avec le Zen 7.5-dev thème sensible. Et je vais garder mon css fichiers SASS, mais c'est probablement juste une question CSS. Peut-être que j'ai raté quelque chose sur le HTML 5 ou CSS3 côté des choses.

De toute façon, j'ai des choses à travailler en substituant la largeur de l'image de Firefox directive spécifique comme ceci:

/* Make Firefox images scale with screen width. The width:100% messes up on Safari */
@-moz-document url-prefix() {  
  img {   
    width: 100%;   
  }
}

Je ne pense pas que j'aurais à le faire, et google ne semble pas venir à travers cette question.

Pouvez-vous donner un exemple, avec certains de balisage et d'images réelles?

InformationsquelleAutor Tom Stermitz | 2013-02-05

8

C'est la CSS par défaut qui est utilisé pour les Images responsives:
```
img {
  max-width: 100%;
  height: auto;
  width:100%;
}
```
Et c'est l'indispensable Javascript: Bongard.net

Merci à David Bongard pour le Javascript.

Maintenant ajouter ce qui suit à la section "si safari" de la règle du Script:
```
for (var i = 0; i < document.getElementsByTagName("img").length; i++) {
  document.getElementsByTagName("img")[i].style.width = "auto";
  }
```
Safari veut width:auto; le reste des navigateurs que j'ai testé sont heureux avec width:100%;

InformationsquelleAutor Milingu Kilu

Cela fonctionne pour moi

@-moz-document url-prefix() {  
    img{
        width: 100%;
        max-width: 100%;
    }
}

@media screen and (-webkit-min-device-pixel-ratio:0) {    
     img{
        max-width: 100%;
    }    
}

Ajouter un peu plus de détails.
j'ai eu le même problème mais résolu avec vos codes , merci

InformationsquelleAutor dmitriy.g

5

J'ai le même problème, et trouvé paramètre max-width sur l'emballage élément un peu résout le problème. (Testé uniquement avec Firefox 23, mais il devrait fonctionner avec les anciennes Firefox aussi.) Voir aussi ces JSFiddle:
- http://jsfiddle.net/CLUGX/ (illustrent le problème sur Firefox)
- http://jsfiddle.net/CLUGX/1/ (utilise max-width sur wrapper pour résoudre le problème)
- http://jsfiddle.net/CLUGX/4/ (démontrer que réactif de dimensionnement fonctionne, essayez de redimensionnement du cadre intérieur)
Avant max-width:

Après max-width:

Une chose à noter, toutefois, si vous arrive d'ensemble padding sur wrapper élément, il ne sera pas pris en img's le calcul de la largeur et sera la cause de l'incohérence des résultats entre Firefox et Safari (http://jsfiddle.net/CLUGX/3/):

InformationsquelleAutor Kridsada Thanabulpong
2

Les Chances sont que votre image est à l'intérieur d'un emballage contenant, puis calculer la largeur en fonction de la largeur de l'image. Et puis le max-largeur de l'image est de 100% du conteneur largeur.

Si c'est ce qu'il se passe, le CSS n'est pas réellement définir le comportement de ces balises, où le parent est de la largeur dépend de l'enfant et de la largeur dépend du parent.

Voir https://bugzilla.mozilla.org/show_bug.cgi?id=823483 pour un débat sur la question.
- Merci Boris, qui me donne une direction à regarder. Drupal a une tendance à mettre plusieurs divs, et plusieurs classes sur chaque div.
InformationsquelleAutor Boris Zbarsky
1

Si vous utilisez la largeur de l'image en px ou a donné rembourrage ou utilisé display:table, au lieu de display:block pour l'image, puis l'image de la réactivité ne fonctionnera pas correctement sur certains/tous les navigateurs

InformationsquelleAutor Thilak Raj
1

Bien après avoir essayé toutes sortes de codes et fidles, cette simple edition sur mon css a fait le tour pour moi:
```
img {width: 100%;}
```
Simplement là où vous le voulez vos images et de les redimensionner, de les définir sans l'ajout de la "largeur" de paramètre (taille originale de la source); et puis, si vous voulez fixer leur taille, il suffit d'ajouter la "largeur" du paramètre SRC style (régulier width="" définition ne fonctionnera pas). Si c'est une image en ligne sur votre paragraphe, il suffit de l'envelopper dans un div et aligner au div de quelque côté que vous le souhaitez. Reeeeally simple!

Il fonctionne à la fois pour Google, Firefox et IE. Cheers!
- Une astuce supplémentaire, encapsuler la nouvelle img style css avec un réactif de règle pour qu'elle s'applique uniquement lorsque vous sont en réalité d'avoir à être réactif: @media screen and (max-width: 1100px) {img {width: 100%;}}
InformationsquelleAutor Max Sequeira
0

J'ai juste eu ce problème et trouvé une solution: Quand j'ai mis le img max-width dans ma feuille CSS, rien ne se passe, l'image ne sera pas à l'échelle. Lorsque j'ai mis le max-width dans la page elle - même, où l'image est appelée, elle fonctionne dans tous les navigateurs et sur tous les appareils.

Pas:
```
img {
    max-width: 100%;
    height: auto;   } 
```
Oui:
```
<img src ="image.jpg" style="max-width:100%; height:auto;">
```
Si quelqu'un peut jeter un peu de lumière de la sagesse sur ce, s'il vous plaît.
- Ce n'est pas une réponse, c'est une question.
InformationsquelleAutor FurryCritter
0

J'ai utilisé Kridsada Thanabulpong de jsfiddle, mais seulement réussi à le faire fonctionner quand je l'ai enlevé display:table à partir de la div habillage de mon image.

InformationsquelleAutor Aaron Surrain

Vous devez vous connecter pour publier un commentaire.