Obtenir la largeur et la hauteur d'une image utilisée comme fond CSS

Question

Je construis un carrousel de diaporama jquery pour un site de théâtre, il sert à afficher les titres et les photos associées des 5 spectacles les plus récents au théâtre . Les spectacles et les URL des photos qui ont été téléchargés pour eux, sont chargés dans une base de données, et insérées dans la structure ci-dessous:

<div id="slideshow_outercontainer"> <ul id="carousel"> 
<!-- This is where the <li>s are generated from the database using the photo's url 
as a CSSbackground image --> 
</ul> </div> 

Et les contrôles associés sont placés au-dessous.

Ce que je dois savoir est: Comment puis-je obtenir la hauteur et la largeur de chaque image (en utilisant php ou jquery), et le stocker dans le script d'une certaine façon que jquery peut saisir, et le randomiser. Ce que j'essaie d'obtenir est un positionnement aléatoire de l'image d'arrière-plan, mais j'ai besoin de savoir quelle est la taille de l'image pour qu'elle ne se positionne pas de manière à exposer l'arrière-plan de l'élément.

Aussi, il serait bien d'animer aléatoirement l'image de fond, comme une sorte d'effet de brûlures ken. Mais je pense que je sais comment y parvenir en utilisant animer()

Espérons que quelqu'un puisse aider ici! Merci, Dan.

Answer 1

En PHP, la fonction getimagesize ([Filename]) vous donnera la hauteur et la largeur d'une image. Tout ce que vous avez à faire est de donner à la fonction le nom de fichier de l'image et il retournera un tableau avec la hauteur, la largeur et le type d'image.

Il existe un exemple d'utilisation here et la documentation php.net here.

Answer 2

Vous ne pouvez pas le faire en utilisant uniquement l'image d'arrière-plan. Cela dit, vous pouvez probablement obtenir l'URL de l'image d'arrière-plan, puis créer un élément dom/img avec ce img, le positionner à gauche de l'écran, obtenir ses dimensions, puis le détruire.