CSS- make image fill NOT STRETCH circular div? [closed]

Question

Closed. This question needs debugging details. It is not currently accepting answers.

Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.

Closed 5 months ago.

Improve this question

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 -

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

Mofi · Accepted Answer · 2025-07-13 08:54:38Z

2

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>

edited Jul 13 at 8:54

Mofi

49.9k19 gold badges89 silver badges160 bronze badges

answered Jun 28, 2016 at 4:58

Gautam Jha

1,4831 gold badge15 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

CSS- make image fill NOT STRETCH circular div? [closed]

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related