Chargement et redimensionnement dynamique des images

Question

HTML/Javascript - Je souhaite charger les images dynamiquement, et les images que je vais charger peuvent avoir des proportions différentes.

Je veux que les images s'inscrivent dans une zone spécifique de la division div - une zone contenant 40% de la largeur div et 80% de sa hauteur. Comme ils ont des rapports d'aspect variables, bien sûr, ils n'utiliseront pas toujours toute cette zone, mais je veux les redimensionner de telle sorte qu'ils ne dépassent pas les limites. Mais je ne sais pas à l'avance si je devrais spécifier la largeur ou la hauteur (et l'attribut partenaire à auto) car je ne sais pas quel sera le rapport d'aspect des images à l'avance.

Existe-t-il un moyen CSS de le faire? Ou j'ai besoin de calculer les largeurs requises en utilisant javascript? PS Je n'ai besoin de faire cela qu'avec Firefox 3.5!

Answer 1

Ma solution était de fournir un conteneur div qui lié l'objet à la taille nécessaire:

#img_container { 
    width: 48%; 
    height: 80%; 
} 

Ensuite, pour l'image, elle-même, j'assignée max-width et max-hauteur qui sont reconnues par Firefox:

#img_container img { 
    max-width: 100%; 
    max-height: 100%; 
    display: block; 
} 

de cette façon, l'image elle-même auto-ajuste au plus à la largeur du conteneur, mais maintient le rapport d'aspect correct. Hourra!

Answer 2

Votre serveur peut trouver les dimensions des images et envoyer ces informations lorsque vous demandez une image. A défaut, vous devrez attendre que l'image soit chargée avant que ses dimensions soient disponibles pour javascript.

Cependant, il existe un autre moyen. Demander l'image, indiquant au serveur les dimensions de l'espace que vous avez. Il peut ensuite générer une version appropriée de l'image et la mettre en cache, avant d'envoyer l'image qui est déjà exactement la bonne taille au navigateur.

Mise à jour Une autre façon, qui peut être acceptable pour vous est de définir le conteneur div comme si ...

.mydiv { overflow: hidden; } 

Définissez ensuite l'image à fixer en hauteur et en largeur pour auto. Cela entraînera l'écrêtage d'images trop larges à gauche et à droite de l'image. Si cela est acceptable dans votre cas, alors c'est une solution très simple.