Redimensionnement automatique de l'image dans une mise en page de flux CSS pour simuler un schéma de table html

Question

J'ai une image qui, selon la résolution de l'écran, tombe hors de la vue dans ma mise en page de flux CSS parce que j'ai mis la largeur et la hauteur des valeurs statiques.

Est-il possible dans une mise en page de flux CSS pour avoir l'image redimensionne automatiquement pendant que quelqu'un fait la fenêtre du navigateur plus petit. Je l'ai vu cela dans un schéma de table html et je suppose que les tables permettent là - est-il possible de faire aussi cela dans une mise en page de flux CSS

?

Answer 1

Un test rapide montre que ceci:

<img class="test" src="testimage.jpg" />

combiné avec:

img.test { width: 50%; }

Redimensionne la façon dont vous voulez probablement. L'image redimensionnée consciencieusement à 50% de la largeur de la boîte contenant, ainsi que le redimensionnement verticalement, en maintenant le rapport d'aspect.

En ce qui concerne le redimensionnement en fonction des changements verticaux, il ne fonctionne pas comme vous le souhaitez, au moins pas toujours. J'ai essayé:

img.test { height: 50%; }

Dans Google Chrome (2.0.172) actuelle, il redimensionne un peu inconsitently; le dimensionnement est correct, mais ne met pas à jour après chaque glisser la fenêtre. Dans Firefox (3.5) courant, la hauteur semble être ignoré complètement. Je n'ai pas de distance récente IE, Safari, etc à tester. Ne hésitez pas à modifier dans ces résultats. Même si ceux qui font bien son encore probablement quelque chose que vous voulez éviter, et le bâton avec la largeur.

EDIT: Pour que cela fonctionne, tous les éléments contenant img.test doivent être dimensionnés avec des pourcentages, et non statique.

Pensez-y de cette façon:

• corps est de 100% de la taille de la fenêtre.
• img est de 50% du corps.
• img est de 50% de la taille de la fenêtre.

Supposons maintenant ajouter une div. comme ça ...

<div class="imgbox" style="width: 100px;">
  <img class="test" src="testimage.jpg" />
</div>

Ensuite

• corps est de 100% de la taille de la fenêtre.
• div est 100px, en ignorant la largeur du corps.
• img est de 50% div.
• img est 50px, quelle que soit la taille de la fenêtre.

Si la div a « width: 100% » bien, alors la logique fonctionne sur le même qu'auparavant. Tant que son certain pourcentage, et non fixe, vous pouvez jouer avec le pourcentage sur le img et faire fonctionner la taille que vous voulez.

Answer 2

peu d'une supposition depuis mon css est de la foutaise, mais puisque personne ne répond, sur la définition de ce que une largeur de% ou de la hauteur ou les deux dans l'image afin qu'elle soit un pour cent de son parent. je sais pas?

Answer 3

Essayez réglage max-width à quelque chose comme 95%. Merci façon dont l'image se rétrécit lorsque la largeur du conteneur est inférieure à la largeur de l'image. Tous les conteneurs parents auraient besoin d'ADJU

max-width:95%;