Question

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

如果大于div的宽度，我需要调整此图片的大小，如果用户点击图片，则以完整尺寸显示。

使用窗口宽度管理div宽度。

我该怎么做？

Answer 1

您可以使用.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();
});

Answer 2

jQuery.popeye是一个灵活的插件，用于执行此类交互。

Answer 3

可以使用

Jquery imagefit +选择的模态弹出框

如何使用jQuery单击调整图像大小？

3 个答案: