taille de l'image avec jquery sans balise prédéfinie, puis passez à CSS

Question

Y at-il un moyen de connaître la largeur et la hauteur de l'image de suivi avec Jquery?

<div id="imgBox"><img id="imgID" src="images/koala.gif" /></div> 

Puis le passer en CSS?

<style type="text/css"> 
    #imgBox, #imgBox img { width:imageWidth; height:imageHeight } 
</style> 

Je devine ...

<script type="text/javascript"> 
    $(document).ready(function(){ 
     var imageWidth = $("#imgBox").width(); 
     var imgHeight = $("#imgID").height();   
    }); 
</script> 

Answer 1

Pourquoi ne pas définir le CSS dynamiquement?

$(document).ready(function(){ 
    // make sure img is loaded: 
    $("#imgID").load(function() { 
     var $this = $(this); 

     // Set dimensions of box using dimensions of img 
     $("#imgBox").css("width", $this.width());  
     $("#imgBox").css("height", $this.height()); 
    });  
}); 

Vous pouvez bien sûr ajouter aux valeurs de $this.width() et $this.height() lorsque vous définissez la css pour #imgBox si vous avez besoin pour des raisons esthétiques ... disons que si vous avez une image d'arrière-plan #imgBox vous voulez montrer la bords de.

Answer 2

Vous pouvez faire

$(function() { 
    var imgSrc = $('#imgId').attr('src');   
    var image = new Image(); 
    var width, height;  
    image.onload = function() { 
     width = image.width; 
     height = image.height; 
    }; 
    image.src = imgSrc;   

}); 

Vous pouvez alors écrire le CSS avec JavaScript.

$('<style />', { 
    html: '#imgBox, #imgBox img { width:' + width + 'px; height:' + height + 'px }', 
    type: 'text/css' 
}).appendTo('head'); 

Mais, pourquoi avez-vous besoin de faire cela?

Answer 3

vous pouvez le faire, mais pouvez-vous dire pourquoi vous voulez remplacer css.

 var $imgId = $('#imgId'); 
     var h = $imgId.height(); 
     var w = $imgId.width(); 

faire vos maths ici

$imgId.css('height', yourcalculatedheight); 
$imgId.css('width', yourcalculatedweight); 

vous pouvez analyser le dom et changer dynimically au lieu d'aller et changer le css qui pourrait être une bonne approche