Comment redimensionner dynamiquement l'image dans le css?

J'ai une simple html + css de la page qui a 3 images. Je suis en train de faire la page de les redimensionner selon la taille de la fenêtre du navigateur. Maintenant, j'ai les 3 images dans un div qui est réglé à une hauteur en pourcentage de la entourant les conteneurs, et les images sont fixés à hauteur de:100% et width:auto. maintenant, cela fonctionne bien si vous redimensionnez la fenêtre entière - mais seulement si vous modifiez la largeur, ils ne sont pas redimensionner bien sûr, étant donné que la hauteur ne change pas, et en fin de compte ils poussé vers le bas de la page, ce qui est vraiment moche.

ma première question: est-il un bon moyen de rendre les images redimensionner peu importe si vous modifiez la hauteur OU la largeur du navigateur à l'aide de html/css? Si non, dois-je utiliser jquery et si oui pouvez-vous m'indiquer une bonne ressource?

Deuxième question: si il n'est pas possible, comment puis-je au moins les empêcher de pénétrer tombé en bas d'une ligne? J'ai essayé de faire le débordement cachés ou défile, mais ils ont encore tombé, puis coupez votre vous avez à faire défiler l'écran verticalement.

Voici un lien vers la page: http://carissalyn.com/Landing.html (oui je me rends compte que les images se chargent lentement je vais compresser avant de les live). Laissez-moi savoir si vous avez besoin d'autres infos.

Voici le css adéquat (img conteneur est à l'intérieur de fadingtext qui est à l'intérieur du corps):

body,html{
height:100%;
margin:0; padding:0;
}

#imgcontainer{
height: 100%;
width: 90%;
display: inline-block;
}

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

#fading_text {
text-align: center;
height: 60%;
-webkit-animation: fade-text 20s 1;
-moz-animation: fade-text 20s 1;
}

Et voici le html concernés de préciser qu'il existe 3 images:

<div id="fading_text">
<div id="imgcontainer">

<a href="" class="imghover"><img src="images/leaf.jpg" alt="portrait" class="border"></a>
<a href="" class="imghover"><img src="images/DSC_2280-Edit-Edit-Final.jpg"  alt="portrait" class="border"></a>
<a href="" class="imghover"><img src="images/DSC_2685.jpg" alt="blog" class="border">  </a>

</div>
</div>

OriginalL'auteur user1754602 | 2012-11-27

  1. 2

    Essayer de chercher des articles sur ResponsiveUI - qui donnera beaucoup de utile d'informations.
    "mise à l'échelle automatique" qui pourrait être fait avec le code suivant:

    <div class="wrapper">
 <img src="img.png">
</div>

    .wrapper img {
     width: 100%;
     max-width: 100%
     height: 100%;
    }
    Cela fonctionne avec plusieurs photos? Je ne veux pas de photo de la largeur à 100% si il y a plus d'un... droit? Je vais regarder les ResponsiveUI grâce.
    D'autres idées? J'ai regardé le ResponsiveUI et alors que je pense que c'est la direction que je vais y aller, je ne suis pas sûr qu'il traite de mon problème. Même à l'intérieur de la définition de la taille, si la largeur est changé et pas à la hauteur je rencontre ce problème.

    OriginalL'auteur Dmitry Volokh