How do I center an image in a circle around it? The circle should then lie behind the picture and only frame it.

HTML

<div>
    <div class="circle"></div>
    <img src="../../assets/img/img.png" alt="" class="showslide">
</div>

CSS

.circle {
    margin-top: 5%;
    padding-top: 5%;
    border: 4px solid #fff;
    border-radius: 50%;
    z-index: -1;
}
    
.showslide {
    width: 80%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

CodePudding user response：

  body {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      font-family: "Montserrat", sans-serif;
      color: #262e2e;
      box-sizing: border-box;
      margin: 0;
      background: #f5f8fa;
      padding: 40px 0px;
    }

    .image-container {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 300px;
      height: 300px;
      border-radius: 50%;
      background-color: #ffffff;
      border: 1px solid #dddddd;
    }

  <h4>Center Image</h4>
    <div class="image-container">
      <img
        src="https://image.shutterstock.com/image-photo/kiev-ukraine-march-31-2015-260nw-275940803.jpg"
        width="100"
      />
    </div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

Take a look if you need this then also up-vote..!!

CodePudding user response：

Do you need to keep the circle div as a sibling of the image? Because if you put the image inside the circle div, your code it´s already working:

.circle {
  margin-top: 5%;
  padding-top: 5%;
  border: 4px solid #000;
  border-radius: 50%;
}

.showslide {
  width: 80%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

<div class="circle">
    <img src="https://cdn.iconscout.com/icon/free/png-512/account-avatar-profile-human-man-user-30448.png" alt="" class="showslide">
</div>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

I've removed the z-index (not needed in this case) and changed the border color to black.

CodePudding user response：

Not quite sure what you are trying to accomplish here but as far as I understood, ur trying to make the frame unclickable. First of all, you can't keep the frame behind the picture because then the image gets in front of it and keeps it hidden.
pointer-events: none;

Set this for the frame and it should be good.

CodePudding user response：

How do I center an image in a circle around it?

One approach would be to apply two CSS properties to the <img>:

• a border
• an outline

---

Working Example:

.my-image {
  width: 144px;
  height: 144px;
  border: 18px solid rgb(255, 255, 255);
  border-radius: 50%;
  outline: 1px solid rgb(191, 191, 191);
}

<img class="my-image" src="https://picsum.photos/132/132" alt="My Picture">

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>