Réinitialisation de l'image de la largeur et de la hauteur définie via css

Je suis en train de créer un fluide-mise en page en html, contenant des images.
Pour l'instant, j'ai 2 tailles pour la mise en page. La mise en page par défaut est utilisé pour afficher une 1000px de large site. Si l'écran est assez large (plus large que 1200px), j'ai d'améliorer de nombreux aspects avec les css media queries.

J'ai un DIV conteneur qui est de 600px de large pour la mise en page par défaut, et 700 pixels pour le renforcement de la mise en page.
Il y a une image aléatoire à l'intérieur, pour qui je sais que certaines métadonnées (largeur et hauteur). J'ai peut-être besoin de réduire la taille de l'image si elle est trop grande pour le conteneur.

Donc j'utilise ce code pour avoir un fluide de mise

<div class="container">
  <!-- for a 650px/400px image, the downsized version is 600px/369px -->
  <img src="/image?id=1234" width="650" height="400" style="width:600px;height:369px" />
</div>

et le style

@media screen and (min-width:1200px){
  .container IMG {
    width:auto !important;
    height:auto !important;
  }
}

Voici comment cela fonctionne:

Dans le cas de la mise en page par défaut, le style en ligne s'applique. Alors l'image est réduite à 600px/369px pour adapter le contenant.
Sinon, la requête de média de style s'applique, et l'image est la valeur par défaut de la largeur/hauteur (je sais l'image n'est jamais, large de plus de 700 pixels, donc tout va bien).

Mon problème vient de l'état de chargement de l'image et de l'espace réservé par le navigateur. Le comportement de chrome/firefox est le même, mais est assez étrange pour moi. Pas testé avec IE (pas ma priorité en fait)

Pour la mise en page par défaut, pas de problème, la ligne-style s'applique toujours. Le navigateur affiche un espace blanc correspondant à l'image.

Pour le renforcement de la mise en page, la fonction "auto" tailles s'applique. Mais le navigateur ne sait pas la taille normale de l'image alors qu'il n'est pas entièrement chargé, et il semble que "auto" est équivalent à 0px. Il serait parfait si la largeur et la hauteur attributs de l'image appliquée. Mais il n'est pas le cas. Le résultat est qu'aucun espace n'est réservé pour l'image, qui n'est pas le comportement que je veux.

Une première solution que j'ai trouvé est d'ajouter un autre inline règle css pour l'image. Si j'ajoute "min-width:600px; min-height:369px" l'espace réservé pour l'image est toujours 600x369 pixels, au lieu de 0 pixels pour le renforcement de la mise en page. C'est mieux, mais pas encore parfait.

-- Qu'en pensez-vous ?

Est-il possible de "réinitialiser" le css au lieu de passer outre avec la fonction "auto !important" règle ?
Devrais-je utiliser une autre approche ?
Je peut utiliser du javascript, mais je pense que c'est une mauvaise idée de s'appuyer sur elle. En fait, j'ai peut-être beaucoup de conteneurs similaire à celle décrite ci-dessus. Je préfère une solution automatique (css est grand pour que).

Savez-vous si il est possible d'ajouter une ligne de media query pour un élément ? Je ne pense pas que c'est possible. Mais si elle l'est, je pourrais écrire: <img src="..." style="width:600px;height:369px; @media screen and (min-width:1200px){width:650px;height:400px}" />

OriginalL'auteur Mat | 2012-03-30

1

L'approche générale que j'ai vu sont lancés pour les images responsives est d'avoir un élément parent (comme .conteneur) modifier les tailles avec les media queries. Dans votre balisage supprimer la largeur et la hauteur attributs, puis dans votre CSS ajouter:
```
img {
   width: 100%;
 }
```
Que votre parent de l'élément taille de l'est dictée par les médias, les règles de requête, votre image va croître en conséquence.

J'évoque ceci, car il semble que vous voulez utiliser le même fichier image, mais juste grandir/rétrécir. L'inconvénient majeur est que une image plus grande charge sur un appareil mobile sur l'écran, et les ajouter au chargement de la page. C'est l'obstacle technique majeur face à Responsive design actuellement, il y a un grand débat sur la meilleure façon d'y répondre.

Je viens de faire un test. En fait, je fais face à exactement les mêmes problèmes, mais pour une raison que je n'ai pas l'expliquer dans mon premier post. Je sais que la largeur du conteneur, mais je ne sais pas à sa hauteur. Je veux la hauteur du conteneur soit la même que l'enfant de l'image. Donc, pendant le chargement de l'image, le conteneur n'a pas encore de hauteur.
Sur l'utilisation de la même image pour les deux mises en page, j'ai 2 raisons: (1) si l'image est inférieure à 600px de large, c'est exactement la même image à la fois la présentation. (2) je pense que la surcharge de 600px à 700 pixels n'est pas assez grand pour impliquer une importante réduction de poids de l'image. Mais si j'ai 2 images, je dois stocker les 2 image sur le côté serveur.
Re: taille de l'image - c'est une bonne raison pour utiliser la même image. 100px différence n'est pas assez pour justifier une beaucoup plus compliqué solution. Re: conteneur parent - Si vous ne définissez pas explicitement la hauteur du conteneur parent, doit grandir avec l'image, quelle que soit la hauteur de l'image. N'est-ce pas le cas pour vous?

OriginalL'auteur chipcullen
1

vous suffit de définir le width ou height à initial.. qui réinitialise la Valeur à remplacer..

Au lieu de zéro! l'utilisation initiale.. mon mauvais...
En fait, cela ne fonctionne pas. Si une image a width et height attributs, et il n'y a AUCUN css qui définit la largeur, il semble comme si il n'y a aucun moyen de l'obtenir à l'honneur les valeurs de l'attribut...

OriginalL'auteur Kim Yang Jacobsen
0

Utilisation .container IMG.someClass { ... } ensuite, vous pouvez supprimer le nom de la classe à partir de l'image pour supprimer les CSS style.

C'est juste que j'ai besoin de le style que pour la mise en page par défaut. Alors, quand je détecte le renforcement de la mise en page, je peux supprimer la classe avec Javascript. Mais comme je l'ai dit à la fin de mon premier post, en faisant cela, je lâche toutes les grandes fonctionnalités offertes par css media queries, non ?

OriginalL'auteur Diodeus - James MacFarlane

Vous devez vous connecter pour publier un commentaire.