Dynamic User Profiles

Centers, adjusts and expands user uploaded images to fit constraints of a particular size. Is not responsive as of 1.1 build.

by SamsChoice

HTML

<div class="container">
    <img id="image-1" alt="" src="http://placekitten.com/1000/700" />
</div>
<div class="container">
    <img id="image-2" alt="" src="http://placekitten.com/400/400" />
</div>

<!-- Go ahead and change the src numbers 300/400 to your choice combination. The first number represents the width, the second number represents the height. Feel free to change the container css too.

CSS

.container {
    border:1px solid green;
    height:200px;
    width:200px;
    margin-top:50px;
    overflow:hidden;
    margin-left:50px;
}
.container img {
    position:relative;
}

JavaScript

function centerMe(container) {
    var boxHeight = parseInt($(container).css('height').replace('px', ''));
    var boxWidth = parseInt($(container).css('width').replace('px', ''));

    $(container + ' img').each(function (index) {
        var height = parseInt($(this).css('height').replace('px', ''));
        if(height > boxHeight){
            var difference  = height - boxHeight;
            $(this).css('height', boxHeight);
            var width = parseInt($(this).css('width').replace('px', ''));
            if(width > boxWidth + 1){
                var moveLeft = (width - boxWidth)/2;
                console.log(moveLeft);
                $(this).css('left', '-' + moveLeft + 'px');
            }
        }
    });
}

centerMe('.container');

/* simply copy and paste the function into your js file, then call it. Remember to put the name of the id or class for the containers holding the images and set a height and width to them in the CSS! */