Jquery JCrop functionality on fluid images

问题

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

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;');

But with no avail, it just breaks 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?

Thanks!

EDIT

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

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

回答1:

i have a look at this - jsFiddle

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

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

来源：https://stackoverflow.com/questions/16815415/jquery-jcrop-functionality-on-fluid-images