在div / jquery中自动调整图像

时间:2012-04-05 10:06:53

标签: jquery html image image-size

如果我的代码是这样的话,如何自动调整图像:

<script type="text/javascript"> 
jQuery.noConflict();
jQuery(document).ready(function () {
    var count = 0;
    function animate() {
        jQuery(".fadein").eq(count).fadeIn(1000);
        count++;
        if(count <= jQuery(".fadein").length) {
            setTimeout(animate, 1000);
        } else {
            jQuery("a.fadein").fadeOut(1000);
            count = 0;
            animate();
        }      
    }
    animate();
});
</script>

这是正确的吗?

<script type="text/javascript"> 
    jQuery.noConflict();
    jQuery(document).ready(function () {
        var count = 0;
        function animate() {
            jQuery(".fadein").eq(count).fadeIn(1000);
            count++;
            if(count <= jQuery(".fadein").length) {
                setTimeout(animate, 1000);
            } else {
                jQuery("a.fadein").fadeOut(1000);
                count = 0;
                animate();
            }      
        }
        animate();
    })
            function fitImagetoContainer() {   $("img").each(function(i) {
     $(this).width($(this).parent().width()); //or your logic   
       }); }

//Call the function at load 
      $(window).load(function() {    fitImagetoContainer(); });


//Also call the function when the window resizes  
      $(window).resize(function() {    fitImagetoContainer(); });;
    </script>

2 个答案:

答案 0 :(得分:1)

这是我的问题

//Create a function to resize the image with respect to parent
function fitImagetoContainer() {
  $("img").each(function(i) {
     $(this).width($(this).parent().width()); //or your logic
  });
}

//Call the function at load
$(window).load(function() {
   fitImagetoContainer();
});


//Also call the function when the window resizes 
$(window).resize(function() {
   fitImagetoContainer();
});

答案 1 :(得分:0)

您需要添加css。它更好,更易于维护。

只需将此添加到您的图片css即可。

.fadein img {width: 100%; height: auto;} //This maintains the aspect ratio.

如果您希望图像无论如何填充容器:

.fadein img {width: 100%; height: 100%;} //This distorts the image to fill the container