CODEWITHSUNDEEP
htmlcss
blue
blue

Reputation: 7375

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

Upvotes: 0

Views: 2060

Answers (1)

Gautam Jha
Gautam Jha

Reputation: 1473

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>

Upvotes: 1

Related Questions