Redimensionnement automatique de l'image dans un flux CSS de mise en page pour simuler un tableau html mise en page

J'ai une image qui, selon la résolution de l'écran, descend vers le bas hors de la vue dans mon flux CSS de mise en page parce que j'ai mis sa largeur et sa hauteur de valeurs statiques.

Est-il un moyen dans un flux CSS de mise en page pour que l'image se redimensionne automatiquement pendant que quelqu'un est prise de la fenêtre du navigateur les plus petits. J'ai vu cette façon de faire dans un tableau html mise en page et j'en assume les tables de la rendre possible, existe - il un moyen de faire cela dans un flux CSS de mise en page?

InformationsquelleAutor Charlie Kotter | 2009-07-09
  1. 10

    Un test rapide montre que cette:

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

    combiné avec:

    img.test { width: 50%; }

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

    Comme pour le redimensionnement basée sur la verticale des changements, il ne fonctionne pas de la façon dont vous voulez, au moins pas de manière uniforme. J'ai essayé:

    img.test { height: 50%; }

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

    EDIT:
    Pour que cela fonctionne, tous les éléments contenant de l'img.test doivent être de taille moyenne, avec des pourcentages, et non pas de façon statique.

    Pensez-y de cette façon:

    • corps est 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.

    Maintenant, supposons que j'ai ajouter un div. c'est comme ça...

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

    Puis

    • corps est 100% de la taille de la fenêtre.
    • div est 100px, en ignorant la largeur du corps.
    • img est de 50% de la div.
    • img est 50px, indépendamment de la taille de la fenêtre.

    Si la div a "width: 100%" même si, ensuite, la logique est le même qu'avant. Aussi longtemps qu'un certain pourcentage, et non pas fixe, vous pouvez jouer avec le pourcentage sur l'img et de le faire fonctionner de la taille que vous voulez.

    • Cela semble exiger la enfermant DIV à un particulier, la largeur et la hauteur de la valeur?
    • Voir mon edit. Mettre un div avec un ensemble de largeur et de hauteur de saut de ce que vous essayez de faire.
    • Merci pour la clarification. De sens maintenant. Je vous remercie de suite.
    InformationsquelleAutor WillfulWizard
  2. 2

    peu de deviner depuis mon css c'est de la foutaise, mais comme personne ne répond, ce que sur la définition d'un % de la largeur ou de la hauteur, ou les deux, à l'image de sorte qu'il est d'un pour cent de son parent. je ne sais pas?

    InformationsquelleAutor Dave Archer
  3. 0

    Essayez le réglage max-width à quelque chose comme 95%. Remercier façon dont l'image sera réduite lorsque le conteneur largeur est inférieure à la largeur de l'image. Tous les conteneurs parents auraient besoin d'ordi

    max-width:95%;
    InformationsquelleAutor Josh Brule