Show Rectangular image in circle-CodePudding

I'm writing a code where in I want to show my image in a circle type, but since, my image is in rectangle format I'm unable to do it. Here is my code.

.imgContaier{
  height: 120px;
  width: 120px;
  border: 1px solid;
  border-radius: 50%; 
  background: url('https://a.mktgcdn.com/p-sandbox/0UyvAqm29O_kNDqgTBdC-fK-rpqkrcFjQ66wI6seztY/150x150.jpg');
  background-size: auto;
  background-repeat: no-repeat; 
  background-position: center;
}

 <div > 
 </div>

The image is shown as a rectangle inside the circle. Please let me know how can I fix this.

My Image shows in a perfect circle only 120px in height and width. How can I adjust it to show the same for 200px of height and width?

CodePudding user response：

.imgContaier{
  height: 200px;
  width: 200px;
  border: 1px solid;
  border-radius: 50%; 
  background: url('https://a.mktgcdn.com/p-sandbox/0UyvAqm29O_kNDqgTBdC-fK-rpqkrcFjQ66wI6seztY/150x150.jpg');
  background-size: cover;
  background-repeat: no-repeat; 
  background-position: center;
  
}

<div > 
 </div>

You can use the background-size:cover; this will apply the image to make sure it covers the whole container.

Do note that your picture has margins left and right so you will still see it as a rectangle, but that is due to the image source.

CodePudding user response：

The problem that you have is NOT a CSS issue - its a src image issue.... you are sourcing an image that is only 150px * 150px (and then as noted - has the white margins) .... so its not big enough to fill the 200 * 200 size container.

You can simply enlarge the background size to fill the space or use an image bigger than required.

But the most correct answer is to provide image you are trying to insert to be the right dimensions for the container...

This is allowing a larger image to fully fit into the round space you have at 200 x 200px

.wrapper { 
display: flex;
gap: 32px
}

.imgContaier{
  height: 200px;
  width: 200px;
  border: 1px solid;
  border-radius: 50%; 
  background: url('https://a.mktgcdn.com/p-sandbox/0UyvAqm29O_kNDqgTBdC-fK-rpqkrcFjQ66wI6seztY/150x150.jpg');
  background-size: 250px;
  background-repeat: no-repeat; 
  background-position: center;
}

.imgContaier2{
  height: 200px;
  width: 200px;
  border: 1px solid;
  border-radius: 50%; 
  background: url('https://images.unsplash.com/photo-1595433707802-6b2626ef1c91?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8MXx8fGVufDB8fHx8&w=1000&q=80'); 
  background-size: cover;
  background-repeat: no-repeat; 
  background-position: center;
}

<div >
  <div ></div>
  <div ></div>
</div>

.imgContaier{
  height: 120px;
  width: 120px;
  border: 1px solid;
  border-radius: 50%; 
  background: url('https://a.mktgcdn.com/p-sandbox/0UyvAqm29O_kNDqgTBdC-fK-rpqkrcFjQ66wI6seztY/150x150.jpg');
  background-size: auto;
  background-repeat: no-repeat; 
  background-position: center;
}

 <div > 
 </div>

CodePudding user response：

I would use regular images in combination with object-fit - that works much like background position and size

.avatar {
  display: block;
  width: 6rem;
  height: 6rem;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid;
}


/* ignore this */
body { display: flex; gap: 1.5rem; }

<!-- Avatar -->
<img src="https://unsplash.it/id/669/400/200"  />

<!-- Original -->
<img src="https://unsplash.it/id/669/400/200"  />