How to center an image into circle?

#1

Hello, can you help me with my problem?
I want to center image into circle, but i dont know how.
When i type size 45x45, picture is in the center of the cicrle, but picture is smaller, that i want.
When i type size 46x46 and more picture is moving to right-bottom corner. I tried margin-bottom and margin-right commands, but it doesnt do nothting. Here is my code

CSS:

.social{
float: left;
width: 45px;
height: 45px;
border-radius: 50%;
background-color: #f0e68c;
border: 1px dotted #b8860b;
margin-left: 15px;
padding: 2px;
}

.social1{
float: left;
margin-left: 5px;
width: 45px;
height: 45px;
border-radius: 50%;
background-color: #f0e68c;
border: 1px dotted #b8860b;
padding: 2px;
}

.social2{
float: left;
width: 45px;
height: 45px;
margin-left: 5px;
border-radius: 50%;
background-color: #f0e68c;
border: 1px dotted #b8860b;
padding: 2px;
}

.social1 img{
width: 45px;
height: 45px;
transition: filter .5s ease-in-out;
-webkit-filter: grayscale(0%);
filter: grayscale(0%);
}
.social2 img{
width: 45px;
height: 45px;
transition: filter .5s ease-in-out;
-webkit-filter: grayscale(0%);
filter: grayscale(0%);
}

.social img{
width: 47px;
height: 47px;
transition: filter .5s ease-in-out;
-webkit-filter: grayscale(0%);
filter: grayscale(0%); 
}


HTML:

<div class="social">
   <image src="img/fbs.svg">
  </div>
  <div class="social1">
  <image src="img/fbs.svg">
  </div>
  <div class="social2">
  <a href="#"><image src="img/insta.png"></a>
  </div>
#2

why are the images not round? a square is not going to fit into a circle

#3

You can do it like this:

index.html

<body>
  <div id="circle">
  </div>
</body>

style.css

body
{
  background-color:#4da6ff;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
}

#circle
{
  width:200px;
  height:200px;
  border:2px solid black;
  border-radius: 100%;
  background:url(http://via.placeholder.com/450x450) center no-repeat; 
}

Notice how big the image is but centered (and cut) due to circle width and height properties.

#4

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.