How to make the avatar preview image fluid when using jCrop

1 Views

When a user wants to change their avatar in BuddyPress, they are given the opportunity to crop their new image after uploading it.

During the ‘crop step’, the uploaded image is displayed on screen. This ‘preview image’ seems to be a fixed size (it does not resize when the browser window is enlarged or made smaller). I’d like the preview image to resize when the browser window is resized (i.e. be fluid).

Read More

Any idea how can I do this?

Notes: jCrop (which is provided in the WordPress core) is being used to crop the avatar.

I tried adding this to my stylesheet but that didn’t work: 

img {
    max-width : 100%;
    height : auto;
}
Post Views: 1

Related posts

Leave a Reply

4 comments

  2. Maybe you can try to destroy jCrop when user resize the window and create it again when user stop resizing. jCrop create his own image when jCrop is created and maybe this is the problem.

  3. Try this:

    In your JS:

    var jcrop;
$(window).rezise(function(){
    jcrop.destroy();
    jcrop = $('#yourIMG').Jcrop({
        boxWidth: $('#yourIMG').width(), 
        boxHeight: $('#yourIMG').height(),
        // ...
    });
});
$(document).ready(function(){
    jcrop = $('#yourIMG').Jcrop({
        boxWidth: $('#yourIMG').width(), 
        boxHeight: $('#yourIMG').height(),
        // ...
    });
});

  4. Like I said I have no idea what the code looks like so… You may have to overwrite some stuff.

    This is how you should do it.

    HTML:

    <div id="inner">
    <img src="http://c.dryicons.com/images/icon_sets/shine_icon_set/png/256x256/business_user.png" />
</div>

    CSS:

    #inner {
    width: 40%;
    height: 40%;
    border: 1px solid;
}
img {
    width: 100%;
    height: auto;
}

    Wrap the preview image in a div and give it a class/id. Set there height and width to percentages (whatever you want). Now as long as it parent etc can resize this will as well now. Get the image inside and set the CSS to width: 100%; and height auto; This will get it to take up the wrap we just made. Now you only have to worry about putting the wrap in the right place. Mess around with it until you get what you want.

    Note: If there are styles already on it you may need to use !important; but I would not recommend it.

    DEMO HERE

    If this still is not an option, you could use jQuery to get the width of the screen and using that update the image to resize. Not the best way but you could do that.