htmlcss

CSS- make image fill NOT STRETCH circular div?

I know there are many many questions n this but even after looking at several I am having a hard time. I need to make an image scale up to fill BUT NOT STRETCH (keep spect ratio) in a div.

Here is the html:

<div class = "profileimage"><img src = "image.jpeg"/> </div>

Then in css I set the image width to 100% and size the div correctly but still not getting the right result -

enter image description here

This is what Im getting (just image full width):

enter image description here

Solution

  • You forgetting overflow

    overflow:hidden;


    .profileimage{
  position:relative;
  width:200px;
  height:200px;
  border-radius:50%;
  overflow:hidden;
}
.profileimage img{max-width:100%;}
    <div class="profileimage"><img src="https://cdn2.iconfinder.com/data/icons/professions/512/user_boy_avatar-512.png"/></div>