L'obtention de la hauteur de l'Image avant que l'image se charge en HTML

J'ai une table qui est créé dynamiquement à l'aide de DIVs. Chaque ligne 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 de l'affiche sera toujours en changement, et ils sont à partir d'un serveur externe.

Comment puis-je définir la hauteur de mon div, de sorte que je peux adapter des images?

  • Êtes-vous à l'aide de code côté serveur? Si oui, vous devez spécifier la langue/de l'installation.
  • pas de code côté serveur ici. c'est un pur javascript-css jouer
InformationsquelleAutor | 2008-09-20
  1. 3

    Si vous essayez de redimensionner dynamiquement un couple de divs dans une ligne dans une table, vous peut-être mieux d'utiliser un tableau html à la place et faire de chaque image à l'intérieur d'une balise td. Cela va rendre la balise tr redimensionner en conséquence pour l'image dans chaque cellule.

    InformationsquelleAutor Brinley Ang
  2. 3
      this.img = new Image();
  this.img.src = url;
  alert(this.img.width);

    donne la largeur tout en

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

    ne marche pas..

    ne sais pas pourquoi.

    • Merci! Cette réponse est étonnamment difficile à trouver. J'ai utilisé la deuxième, et il fonctionne très bien.
    • La raison pour laquelle, pour autant que je sais, c'est parce que l'image n'a pas forcément fini de charger encore (je suppose que c'charges de manière asynchrone).
    InformationsquelleAutor Lukke
  3. 1

    Vous pouvez:

    1. Pas d'indiquer la hauteur de la div, et laissez-le se développer automatiquement

    2. Une fois que l'image est chargée de faire:

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

    • le tableau a beaucoup de lignes. ne pas ce rendre l'INTERFACE air mauvais?
    InformationsquelleAutor Eric Lathrop
  4. 0

    Nous allons avoir besoin d'un peu plus d'infos très utiles. Vous pouvez obtenir la hauteur & largeur d'une image après le chargement de la page via Javascript (info), alors vous pouvez redimensionner la hauteur de la div après le chargement. Sinon, vous êtes vraiment pas de chance depuis le HTML lui-même n'a rien.

    Si vous êtes à l'aide de PHP, il n'y a getimagesize(), que vous pouvez utiliser si vous construisez un site dynamiquement avec PHP. Il existe des fonctions similaires pour les autres langues, mais nous aurions besoin d'un peu plus d'infos.

    InformationsquelleAutor Bill Turner
  5. 0

    Si vous souhaitez que le navigateur ne format en fonction de la hauteur d'une image, avant qu'il récupère l'image, vous devez envoyer à la hauteur pour le navigateur quelque part. Cela nécessitera quelque chose côté serveur. Le plus rapide serait d'insérer dans le code html directement. Plus lent mais plus élégant serait de récupérer l'image par image avec des <script src=> déclarations d'obtenir des instructions d'un peu de javascript génératrices de cgi. (La différence de vitesse vient de réseau allers et retours.)

    Si vous êtes prêt à redimensionner après les données arrivent, c'est beaucoup plus simple. Soit claque un onload sur les images ou les coller dans les dom normal (par exemple, une table réelle, si vous pouvez le faire avec la balise div et css) et de laisser le moteur de mise en forme, faire le travail.

    InformationsquelleAutor
  6. 0

    Cette question a été abordée dans de multiples façons, et vous avez posé la question de savoir "Ne pas ce rendre l'INTERFACE air mauvais?"

    La réponse à cette question est Oui. La meilleure chose à faire pour vous dans la plupart des cas, sera à la hauteur de votre div à quelque chose qui ressemble bien, puis à l'échelle les images vers le bas pour s'adapter. Cela permet de rendre le rendu plus rapide, et le produit final sera mieux et plus professionnel.

    Mais c'est juste mon propre avis, si. Je n'ai pas de données empiriques à l'arrière que vers le haut.

    InformationsquelleAutor Jeffrey L Whitledge
  7. 0

    De pré-charge en javascript les objets de l'image puis il suffit de référence de la hauteur et la largeur.

    Peut prendre un certain intelligent diablerie de travailler dans tous les navigateurs...

    function getSize(imgSrc){

    var aImg = new Image();

    aImg.src = imgSrc;

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

}
    • comment puis-je me connecter ces objets de l'image avec les balises div qui sont censés les afficher?
    • la largeur et la hauteur sont égales à 0, immédiatement après la création de l'image. Vous devez attendre pour l'image à la charge de l'incendie de l'événement avant de vérifier sa taille.
    InformationsquelleAutor MetaGuru