使用jCrop时如何让头像预览图流畅答案

【问题标题】：How to make the avatar preview image fluid when using jCrop使用jCrop时如何让头像预览图流畅
【发布时间】：2014-02-03 23:18:18
【问题描述】：

当用户想要更改他们在BuddyPress 中的头像时，他们有机会在上传新图片后对其进行裁剪。

在“裁剪步骤”期间，上传的图像会显示在屏幕上。此“预览图像”似乎是固定大小（放大或缩小浏览器窗口时不会调整大小）。我希望在调整浏览器窗口大小（即流畅）时调整预览图像的大小。

知道我该怎么做吗？

注意：jCrop（在 WordPress 核心中提供）用于裁剪头像。

我尝试将其添加到我的样式表中，但没有奏效：

img {
    max-width : 100%;
    height : auto;
}

【问题讨论】：

我调查了这个问题，但在我能帮助理解这个问题之前，我必须创建一个帐户，激活 wordpress，然后才发现我已被重定向到 Gravatar？如果你能链接一个 direct 例子就好了。
对不起，我不能举一个直接的例子，因为我所拥有的一切都在本地主机上。我认为，为了全面了解问题，您需要设置一个安装了 BuddyPress 的自托管 WordPress 站点，或者访问一个启用 BuddyPress 的网站，让用户上传头像。或者，您可以访问 jCrop 网站直接下载 jCrop。
我们不应该经历所有这些。您创建一个示例，将其上传到某处并返回链接，以便我们获取链接。我认为没有人会回答这个问题，因为它需要付出很多努力才能进行设置。
Ruddy 感谢您的 cmets。我会尽快上传一个示例。同时，您可以通过查看 jCrop 插件的默认行为来查看问题 - 我在我的问题中提供了一个链接。
这里是一个正在运行的裁剪脚本示例：deepliquid.com/projects/Jcrop/demos.php?demo=live_crop - 如果您调整浏览器窗口的大小，您应该会看到预览图像没有调整大小。

标签： javascript jquery css wordpress jcrop

【解决方案1】：

试试这个：

在你的 JS 中：

var jcrop;
$(window).rezise(function(){
    jcrop.destroy();
    jcrop = $('#yourIMG').Jcrop({
        boxWidth: $('#yourIMG').width(), 
        boxHeight: $('#yourIMG').height(),
        // ...
    });
});
$(document).ready(function(){
    jcrop = $('#yourIMG').Jcrop({
        boxWidth: $('#yourIMG').width(), 
        boxHeight: $('#yourIMG').height(),
        // ...
    });
});

【讨论】：

【解决方案2】：

就像我说的那样，我不知道代码是什么样的......你可能需要覆盖一些东西。

你应该这样做。

HTML：

<div id="inner">
    <img src="http://c.dryicons.com/images/icon_sets/shine_icon_set/png/256x256/business_user.png" />
</div>

CSS：

#inner {
    width: 40%;
    height: 40%;
    border: 1px solid;
}
img {
    width: 100%;
    height: auto;
}

将预览图像包裹在div 中，并给它一个class/id。将高度和宽度设置为百分比（无论您想要什么）。现在只要它的父级等现在也可以调整它的大小。获取图片并将 CSS 设置为 width: 100%; 和 height auto; 这将让它占据我们刚刚制作的包装。现在你只需要担心把包裹放在正确的地方。搞砸它，直到你得到你想要的。

注意：如果上面已经有样式，你可能需要使用!important;，但我不推荐它。

DEMO HERE

如果这仍然不是一个选项，您可以使用 jQuery 来获取屏幕的宽度并使用它来更新图像以调整大小。不是最好的方法，但你可以这样做。

【讨论】：

这并不能解决问题。正如您所说，您确实需要查看代码。我会尽快上传一个例子。同时，您可以通过查看 jCrop 插件的默认行为来发现问题。 deepliquid.com/content/Jcrop.html
我真的不明白你想要什么。也许图像会有所帮助？在哪里以及如何展示你想要的东西？
Ruddy - 我在 Jcrop 网站上找到了一个示例：deepliquid.com/projects/Jcrop/demos.php?demo=live_crop - 在这里您可以看到 Jcrop 大小问题的解释：deepliquid.com/content/Jcrop_Sizing_Issues.html
@henrywright 我看了看，但我仍然不确定你想要什么。我愿意帮助你，但我需要你更好地解释它。就像我之前说的，给我一个问题的演示。制作图像以显示问题所在以及何时发生等。
@henrywright 你说“预览”图像没有调整大小？你的意思是你在哪里种植？还是旁边的小图？如果您在谈论裁剪位，我认为他不能通过浏览来调整大小。这是因为它使用px 来确定作物的开始和结束。如果我们将其更改为使用浏览器调整大小（百分比），它就不会知道我们是从哪里开始以及应该在哪里结束。

【解决方案3】：

也许您可以在用户调整窗口大小时尝试销毁 jCrop，并在用户停止调整大小时重新创建它。 jCrop 在创建 jCrop 时会创建自己的图像，也许这就是问题所在。

【讨论】：

【解决方案4】：

试试这个css代码

img{max-width:100%;height:auto;}

【讨论】：

嗨 Anandu，感谢您的代码。我希望事情就这么简单。我已经在我的 CSS 文档中使用它来使我的网站上的图像流畅。这是我遇到问题的特定头像预览图像（请参阅我的问题以获取更新）。
你能给我你的网站网址吗
对不起，我什么都在本地。