Question

有没有办法用Jquery找出跟随图像的宽度和高度？

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

然后将其传递给CSS？

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

我在猜...

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

Answer 1

为什么不动态设置CSS？

$(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());
   });       
});

如果出于美学原因需要设置$this.width() $this.height()，则可以添加css和#imgBox的值...让我们说如果你有#imgBox想要显示边缘的背景图像。

Answer 2

你可以做到

$(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;        

});

然后你可以用JavaScript编写CSS。

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

但是，你为什么需要这样做？

Answer 3

你可以这样做，但是你能告诉你为什么要覆盖css。

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

在这里做所有数学

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

你可以解析dom并动态地改变它而不是去改变css这可能是一个很好的方法

图像大小与jquery没有在标签中预定义然后传递给CSS

3 个答案: