Obtention de la hauteur de l'image avant le chargement de l'image en HTML

Question

J'ai une table créée dynamiquement à l'aide de DIVs. Chaque rangée de la table a deux images. Je veux définir la hauteur de la div (qui représente une ligne particulière) à la hauteur de l'image qui est la plus grande des deux images affichées dans cette ligne particulière. Les images à afficher changeront toujours, et elles proviennent d'un serveur externe.

Comment régler la hauteur de ma div pour que je puisse ajuster les images?

Answer 1

Pré-chargez-les dans des objets image javascript, puis référencez simplement la hauteur et la largeur.

peut prendre un certain diablerie intelligent pour travailler dans tous les navigateurs ...

function getSize(imgSrc){ 

    var aImg = new Image(); 

    aImg.src = imgSrc; 

    aHeight = newImg.height; 
    aWidth = newImg.width; 

} 

Answer 2

Vous pouvez:

1. Ne pas spécifier la hauteur de la div, et laissez-le développer automatiquement

2. Une fois l'image chargée, faites:

   document.getElementById ("myDiv"). Hauteur = document.getElementById ("myImage"). Hauteur

Answer 3

Nous aurons besoin d'un peu plus d'informations pour être très utiles. Vous pouvez obtenir la hauteur & largeur d'une image après le chargement de la page via Javascript (info), puis vous pouvez redimensionner la hauteur de la div après le chargement. Sinon, vous n'avez vraiment pas de chance car le HTML lui-même n'a rien.

Si vous utilisez PHP, il y a getimagesize(), que vous pouvez utiliser si vous construisez le site dynamiquement avec PHP. Il existe des fonctions similaires pour d'autres langues, mais nous aurions besoin d'un peu plus d'informations.

Answer 4

Si vous essayez de redimensionner dynamiquement deux divs d'affilée dans une table, il est peut-être préférable d'utiliser une table html à la place et de placer chaque image dans une balise td. Cela fera redimensionner la balise tr en conséquence pour l'image dans chaque cellule.

Answer 5

Si vous souhaitez que le navigateur effectue la mise en page en fonction de la hauteur d'une image, avant d'extraire l'image, vous devez envoyer cette hauteur au navigateur quelque part. Cela nécessitera quelque chose du côté serveur. Le plus rapide serait d'insérer directement dans le HTML. Plus lent mais plus élégant serait de le chercher image par image avec < script src = > instructions qui obtiennent des instructions à partir d'un bit spécial de CGI générateurs de JavaScript. (La différence de vitesse provient des allers-retours réseau.)

Si vous êtes prêt à redimensionner après l'arrivée des données, c'est beaucoup plus simple. Vous pouvez soit appliquer un gestionnaire d'onload sur les images, soit les coller dans un dom normal (par exemple une table réelle, bien que vous puissiez le faire avec divs et css) et laisser le moteur de mise en page faire le travail.

Answer 6

Cette question a reçu une réponse de plusieurs façons, et vous avez posé la question supplémentaire "Cela ne rendra-t-il pas l'interface utilisateur mauvaise?"

La réponse à cette question est Oui. La meilleure chose à faire pour vous dans la plupart des cas sera de régler la hauteur de votre div à quelque chose qui a l'air bien, puis redimensionner les images pour s'adapter. Cela rendra le rendu plus rapide, et le produit final aura l'air mieux et plus professionnel.

Mais c'est juste ma propre opinion, cependant. Je n'ai aucune donnée empirique à l'appui.

Answer 7

this.img = new Image(); 
    this.img.src = url; 
    alert(this.img.width); 

donne la largeur tout

var img = new Image(); 
    img.src = url; 
    alert(img.width); 

ne marche pas ..

dunno pourquoi.