Réglage de la largeur d'image proportionnelle pour resize navigateur

Question

Si j'ai une image combinée à un style:

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

img.test { width: 50%;}

L'image redimensionné à 50% de la largeur de la boîte contenant, ainsi que le redimensionnement verticalement, en maintenant le rapport d'aspect.

Cela semble exiger la enfermant DIV être réglé sur une largeur donnée et la valeur de la hauteur. Mais si vous voulez que le englobante DIV pour redimensionner automatiquement le navigateur est traîné plus petit ou plus grand, ne serait-ce un problème?

Answer 1

J'ai clarifié ma réponse à votre question initiale. Allez jeter un coup d'oeil et voir si elle efface les choses. Plus ou moins, si vous voulez que l'image redimensionner la fenêtre ne peut pas définir la DIV à une largeur et une hauteur fixe. La DIV doit avoir une largeur et une hauteur% également.

Answer 2

Vous devez spécifier manuellement les propriétés de width et height pour obtenir l'image de garder ses dimensions. Ce ne serait pas trop difficile si vous utilisez le codage côté serveur (PHP / ASP).

Une autre façon de le faire serait d'utiliser JavaScript pour calculer et redimensionner l'image dynamique.

Answer 3

Non, l'image sera toujours 50% de la div, et si le div est une partie de la page, qui n'a pas d'importance.

Answer 4

Ses toutes proportions: La div renfermant peut-être 2/3 de toute la fenêtre, et l'image wil 1/2 de cela. Tout se calcule avant son affichage, juste un tas de nombre crissant. ; D