Idea for PORT
HTML
<div id="picFrame"></div>
CSS
body * {
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
#picFrame {
height: 60%;
position: absolute;
border-radius: 50%;
top: 15%;
left: 50%;
background-image: url("http://miriadna.com/desctopwalls/images/max/Falling-asleep-forest.jpg");
background-size: cover;
background-position: top left;
background-repeat: no-repeat ;
overflow: visible;
border: 10px solid rgba(255, 255, 255, 0.6);
}
JavaScript
var dH = $('#picFrame').height(),
mL = '-' + $('div').height()/2 + 'px';
$('#picFrame').css({
width : dH,
'margin-left' : mL
});
console.log(mL);