gpt4 book ai didi

jquery - 将 jCrop 与响应式设计/流体宽度 CSS 结合使用

转载 作者:技术小花猫 更新时间:2023-10-29 11:04:59 27 4
gpt4 key购买 nike

我在为网站的移动版本使用响应宽度图像时遇到问题。

当我将 100% 的宽度设置应用到上传的图像时 - 以允许移动设备上的用户提供成功裁剪的最佳选择,输出的裁剪不是选择的裁剪区域。

我认为这是由于 jcrop 从真实图像的大小开始工作,而不是调整后的版本(100% 宽度),但我不知道如何修复它。

我看过这个question (和回答)但我不明白如何应用到我的 Jcrop 函数:

$(function(){
$('#target').Jcrop({
aspectRatio: 4/3,
bgColor: '#000',
bgOpacity: .4,
onSelect: updateCoords
});
});
function updateCoords(c)
{
$('#x').val(c.x);
$('#y').val(c.y);
$('#w').val(c.w);
$('#h').val(c.h);
};
function checkCoords()
{
if (parseInt($('#w').val())) return true;
alert('Please select a crop region then press submit.');
return false;
};

如果我不对上传的图像应用任何尺寸的 CSS,效果会很好,但一旦我开始尝试管理图像尺寸以显示时,裁剪后的图像就会倾斜。

我认为 Google 会在这方面给出更多结果,因为我预计这是一个常见问题 - 或者也许我太迟钝,看不到明显的东西。

我希望有人能提供帮助。

最佳答案

尝试将以下内容添加到您的 Jcrop 调用中:

trueSize: [oImage.naturalWidth,oImage.naturalHeight],

关于jquery - 将 jCrop 与响应式设计/流体宽度 CSS 结合使用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20643099/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com