Question

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

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

知道我该怎么办？

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

我尝试将其添加到我的样式表中，但这不起作用：

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

Answer 1

试试这个css代码

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

Answer 2

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

Answer 3

试试这个：

在你的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(),
        // ...
    });
});

Answer 4

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

这就是你应该怎么做的。

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时使头像预览图像流畅

4 个答案:

HTML：

CSS：