当前位置：文江博客话题详情

如何使用 jQuery 在点击时调整图像大小？

发布于 2024-09-13 10:10:05 字数 151 浏览 4 评论 0原文

我有下一个问题：我有一个包含图像的 div 。

如果大于 div 的宽度，我需要调整该图像的大小，并且如果用户单击该图像，则以完整尺寸显示它。

div 宽度由窗口宽度管理。

我该怎么做？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

姐不稀罕 2024-09-20 10:10:05

您可以使用 .css() 函数来设置图像的大小，或者如果您想让图像变得更漂亮，您可以使用 .animate() 来动画更改。

假设您的图像的 id 是#myimage，这就是您的做法。

$("#myimage").click(function(){
   var imgWidth=    $(this).css("width");
   var imgHeight =  $(this).css("height");
   //Checks if the image is already in original size:
   if(imgWidth == originalWidth && imgHeight == originalHeight)
   {
       resizeImage();
   }
   else
   {
       $(this).css({width:originalWidth, height: originalHeight});
   }

});

这假设您已经保存了图像的原始大小，否则无法计算图片曾经有多大。

编辑：

假设你的div的id是#mydiv，

当页面加载完成时，$(document).ready()被调用。

function resizeImage()
{
        var imgWidth=    $("#myimage").css("width");
        var imgHeight =  $("#myimage").css("height");
        var divWidth = $("#mydiv").css("width") ;
        var divHeight = $("#mydiv").css("height") ;
        originalHeight = imgHeight;
        originalWidth=imgWidth;

        if (imgWidth > divWidth && imgHeight > divHeight)
        {
            var heightDiff = imgHeight  - divHeight;
            var widthDiff = imgWidth  - divWidth;
            //First find out which of the two dimensions is MORE boundry stretching, then we only change that dimension, to keep the image's original proportions.
            if(heightDiff>widthDiff)
            {
                $("#myimage").css("height", divHeight); //Set the
            }
            else
            {
                $("#myimage").css("width", divWidth); //Set the width to the div's width
            }
        }
        else if(imgWidth > divWidth)
        {
            $("#myimage").css("width", divWidth); //Set the width to the div's width
        }
        else if (imgHeight > divHeight)
        {
            $("#myimage").css("height", divHeight); //Set the height to the div's height
        }
}

$(document).ready(function(){
    resizeImage();
});

You can use the .css() function to set the size of the image, or if you want to make it a bit spiffier, you can use .animate() to animate the change.

Say your image's id is #myimage, this is how you would do it.

$("#myimage").click(function(){
   var imgWidth=    $(this).css("width");
   var imgHeight =  $(this).css("height");
   //Checks if the image is already in original size:
   if(imgWidth == originalWidth && imgHeight == originalHeight)
   {
       resizeImage();
   }
   else
   {
       $(this).css({width:originalWidth, height: originalHeight});
   }

});

This assumes you already saved away the original size of the image, since otherwise, there's no way to calculate how big the picture used to be.

EDIT:

Assume your div's id is #mydiv

the $(document).ready() is called when the page finishes loading.

function resizeImage()
{
        var imgWidth=    $("#myimage").css("width");
        var imgHeight =  $("#myimage").css("height");
        var divWidth = $("#mydiv").css("width") ;
        var divHeight = $("#mydiv").css("height") ;
        originalHeight = imgHeight;
        originalWidth=imgWidth;

        if (imgWidth > divWidth && imgHeight > divHeight)
        {
            var heightDiff = imgHeight  - divHeight;
            var widthDiff = imgWidth  - divWidth;
            //First find out which of the two dimensions is MORE boundry stretching, then we only change that dimension, to keep the image's original proportions.
            if(heightDiff>widthDiff)
            {
                $("#myimage").css("height", divHeight); //Set the
            }
            else
            {
                $("#myimage").css("width", divWidth); //Set the width to the div's width
            }
        }
        else if(imgWidth > divWidth)
        {
            $("#myimage").css("width", divWidth); //Set the width to the div's width
        }
        else if (imgHeight > divHeight)
        {
            $("#myimage").css("height", divHeight); //Set the height to the div's height
        }
}

$(document).ready(function(){
    resizeImage();
});

回复收藏 0 原文