如何使用 JCrop 获得响应式图像

Posted 2023-02-25

【中文标题】如何使用 JCrop 获得响应式图像

【英文标题】：How to get responsive images working with JCrop

【发布时间】：2014-12-14 04:09:31

【问题描述】：

我看到了一些解决方案，其中使用 truesize 属性让 JCrop 正确处理响应式图像。但是，在使用 JCrop 时，我很难让图像首先响应。如果我删除 jCrop 代码并添加以下 css，则图像是响应式的。

简而言之 - JCrop 有效。响应式图像作品。但是放在一起时，图像没有响应。

JSFiddle here：取消注释 css。 http://jsfiddle.net/work77/oh5esg19/

img
max-width:80%;
max-height:80%;

非常相似的问题在这里没有答案： Jquery JCrop functionality on fluid images

有什么建议吗？ 谢谢。

【参考方案1】：

尝试：

img 
    max-width:80%;
    height:auto;

.jcrop-holder img 
    max-width: none;

【讨论】：

Mattias，我在上面的小提琴中尝试了你的代码，遗憾的是图像仍然没有响应。你试过了吗，也许我错过了什么？

不，你完全正确，它没有响应。星期五下午:-(。但它在加载时以正确大小的视口加载图像。但这当然不是问题。也许在窗口调整大小事件上有一些javascript技巧？我正在尝试自己找到解决方案...

"但它会在加载时以正确大小的视口加载图像。"好点在这里。我真的没有注意到这一点。这种方式也可能对我有用。谢谢。

@JimSmith 嗨 Jim，想知道你解决了 Jcrop 图像的响应性问题

【参考方案2】：

您可以使用 jcrop 来限制它，而不是使用 css 设置最大宽度。

$('#cropbox').Jcrop(
    aspectRatio: 1,
    boxWidth: 450,   //Maximum width you want for your bigger images
    boxHeight: 400,  //Maximum Height for your bigger images
    onSelect: updateCoords,
);

设置 boxWidth 和 boxHeight 将设置你的盒子的大小，并且里面的图像将保持它的比例。