I'm currently working on creating a profile page and I'd like to have an image inside a circular div. The challenge is that I want the image to maintain its aspect ratio, even though the dimensions are unknown and users can upload images of any size.
Here's the code I have so far:
$(window).load(function(){
$('.profile-img').find('img').each(function(){
var imgClass = (this.width/this.height > 1) ? 'wide' : 'tall';
$(this).addClass(imgClass);
})
}).profile-img{
height:150px;
width:150px;
overflow:hidden;
border-radius:50%;
box-shadow: 0 0 5px silver;
}
.profile-img img.tall {
max-width: 100%;
height: auto;
}
.profile-img img.wide {
max-height: 100%;
max-width: 100%;
width: auto;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<div id="profile-img" class="profile-img">
<img src="http://i.enrolin.in/img/profile2.jpg" />
</div>