How to get responsive images working with JCrop

问题

I see some solutions where the truesize property is used to get JCrop to work with responsive images correctly. However, I'm having a hard time getting the images responsive in the first place when using JCrop. If I remove the jCrop code and add the following css, the image is responsive.

In short - JCrop works. Responsive image works. But when put together, the image isn't responsive.

JSFiddle here: Just uncomment the css. http://jsfiddle.net/work77/oh5esg19/

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

Very similar question is unanswered here: Jquery JCrop functionality on fluid images

Any suggestions? Thanks.

回答1:

Try with:

img {
    max-width:80%;
    height:auto;
}
.jcrop-holder img {
    max-width: none;
}

回答2:

instead of setting the max width with css you can limit it with jcrop.

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

Setting boxWidth and boxHeight will set the size of your box and the image inside will keep its propotions.

来源：https://stackoverflow.com/questions/27466265/how-to-get-responsive-images-working-with-jcrop