流体图像上的 Jquery JCrop 功能

Posted

技术标签:

【中文标题】流体图像上的 Jquery JCrop 功能【英文标题】:Jquery JCrop functionality on fluid images 【发布时间】:2013-05-29 13:36:03 【问题描述】:

所以我已经在我的图像上实现了 JCrop,现在必须进行设计更改,以使图像流畅。

我的图像现在有 max-height:100%;max-width:100% 并且在没有 JCrop 的情况下它会相应地缩放,但使用 JCrop 它不会,这是因为 JCrop 在初始化时为图像设置了固定的宽度和高度,例如:

display: none; visibility: hidden; width:540px; height:430px;

$('#feature').children('img').eq(0).removeAttr('style');
$('#feature').children('img').attr('style','display: none; visibility: hidden; width:100% !important;height:100% !important;');

但无济于事,它只会破坏 JCrop。

我所需要的只是让图像和 Jcrop 本身在调整窗口大小时调整和保持比例。 关于如何解决这个问题的任何想法?

谢谢!

编辑

JSFIDDLE -> http://jsfiddle.net/EHQKH/2/

只需擦除 javascript,您应该会在窗口/框架调整大小时看到它调整大小,而使用 Jcrop 则不会

【问题讨论】:

【参考方案1】:

我看看这个 - jsFiddle

img 
    width:100%;
    height:100%;

我从 img 中删除了样式并将其添加到 css 中

【讨论】:

我希望这就是你要找的@Gabriel 它仍然没有调整大小,将 jsfiddle 中的框架保持器拖动到包含图像的框架上,您应该会看到图像没有调整大小,而是出现了滚动条。删除 javascript 和 css 并调整框架大小,您应该能够看到使用最大宽度和最大高度缩放的图像。谢谢! 也许这会有所帮助 - deepliquid.com/projects/Jcrop/demos.php?demo=advanced

以上是关于流体图像上的 Jquery JCrop 功能的主要内容,如果未能解决你的问题,请参考以下文章

jQuery Jcrop 图像裁剪来源

作物上的Jcrop + Canvas透明图像问题

如果调整图像大小,Jcrop 问题 - Jquery

JCrop showPreview 功能说明

如何使用 jcrop 裁剪正确的图像

通过 JQuery 选项对象传递值