流体图像上的Jquery JCrop功能 [英] Jquery JCrop functionality on fluid images

问题描述

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

So I have implemented JCrop on my image and now there has to be a design change, into making that image fluid.

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

My image has now max-height:100%;max-width:100% and it scales accordingly without JCrop, but with JCrop it doesn't and that is because JCrop sets a fixed witdth and height to the image on intialization, eg:

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.

But with no avail, it just breaks JCrop.

我需要做的就是使图像和Jcrop本身在窗口调整大小时调整并保持比例. 关于如何解决这个问题有什么想法吗?

All I need is to make the image and Jcrop itself adjust and maintain proportions on window resize. Any ideas on how to solve this?

谢谢！

编辑

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

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

只需删除javascript，您应该会在窗口/框架调整大小后看到它调整大小，而使用Jcrop则不会.

Just erase the javascript and you should see it resize on window/frame resize, with Jcrop it doesn't

推荐答案

我来看看- jsFiddle

img {
    width:100%;
    height:100%;
}

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

i removed the style from the img and added it in css

这篇关于流体图像上的Jquery JCrop功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！