Add an image inside a circle made with css-CodePudding

I'm trying to add an image inside a circle built with css. I think I could upload the image correctly but there's a problem with the visualization of the image as you can see below. I've also tried to export the image I want to use as the same size of the circle but either that solution is not working.

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.grid {
  display: flex;
  flex-wrap: wrap;
  max-width: 960px;
  width: 90%;
  margin: auto;
}

.cell {
  flex-basis: 33.3%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.cell:before {
  padding-bottom: 100%;
  display: block;
  content: '';
}

.circle {
  border-radius: 50%;
  width: 150px;
  height: 150px;
  margin: 0 auto 1em;
  box-shadow: 0px 0px 15px 0px;
}

.circle img {
  width: 100%;
  height: auto;
  position: relative;
  top: 50%;
  transform: translate(0%, -50%);
}

<div >
  <div >
    <div >
      <div ><img src="{image2}"></div>
      <div >
        <h3>Chiara Bersani <br> Marta Montanini</h3>
      </div>
    </div>
  </div>

The layout actually has 12 circles and each one has a different image inside so I can't do that using background-image in the css section (I've also tried that but not even that solution is working)

CodePudding user response：

Use height and width 100% on the img and then use overflow: hidden; on .circle. If you have resolution issues that means the size of the circle is too large for the image to take up all available space. You should either get a larger image or set it as a background-image to .circle.

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.grid {
  display: flex;
  flex-wrap: wrap;
  max-width: 960px;
  width: 90%;
  margin: auto;
}

.cell {
  flex-basis: 33.3%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.cell:before {
  padding-bottom: 100%;
  display: block;
  content: '';
}

.circle {
  border-radius: 50%;
  width: 150px;
  height: 150px;
  margin: 0 auto 1em;
  box-shadow: 0px 0px 15px 0px;
  overflow: hidden;
}

.circle img {
  width: 100%;
  position: relative;
  height: 100%;
}

h3 {
  text-align: center;
}

<div >
  <div >
    <div >
      <div ><img src="https://dummyimage.com/600x400/000/fff"></div>
      <div >
        <h3>Chiara Bersani <br> Marta Montanini</h3>
      </div>
    </div>
  </div>

You will need to add a few styles for .circle before it shows up as a background-image.

.circle {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background-position: center;
  background-size: cover;
  box-shadow: 0px 0px 15px 0px;
}

<div  style="background-image:url('https://freight.cargo.site/t/original/i/93a33f6ee2b5b1d7617448432f6dfb20aad3d363601ad4f257cd00e0153eb713/12.png');"></div>

CodePudding user response：

You can place the image via CSS, only not in an external stylesheet.

Instead of this:

<div ><img src="{image2}"></div>

Do this:

<div  style="background-image:url('{image2}')"></div>

The rest of the CSS properties (background-position, repeat, etc) you put in the external stylesheet, as it will be the same for all the images.