如何讓我的圖像插入圓圈並以 the.s-circles-1 為中心

Question

如何讓我的圖像在.s-circles-1 <div> ...

Html

 .s-circles-1 { display: inline-block; opacity: 0.1; margin-left: 315px; margin-top: 155px; background-color: #fff; width: 164px; height: 164px; border-radius: 100%; position: relative; }.s-img-1 { opacity: 0.9; display: inline-block; position: absolute; color: #E37218; margin-right: 70vw; width: 120px; height: 120px; }

 <div class="services"> <div class="s-text"> <h2>Services</h2> </div> <div class="s-circles-1"> <img src="/Shapes/code (1).svg" alt="" class="s-img-1"> </div> </div>

我正在嘗試讓我的圖像插入圓圈中。 提前致謝。

Answer 1

要使圖像在 .s-circles-1 div 中居中，您可以在 CSS 中使用 display:flex 和 justify-content:center 屬性。 更新代碼的方法如下：

HTML:

<div class="s-circles-1">
  <img src="/Shapes/code (1).svg" alt="" class="s-img-1">
</div>

CSS：

    .s-circles-1 {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.1;
  margin-left: 315px;
  margin-top: 155px;
  background-color: #fff;
  width: 164px;
  height: 164px;
  border-radius: 100%;
  position: relative;
}

.s-img-1 {
  opacity: 0.9;
  display: inline-block;
  position: absolute;
  color: #E37218;
  width: 120px;
  height: 120px;
}

這將使圖像在 .s-circles-1 div 中居中，同時仍然保持圖像本身的 position: absolute 屬性。

注意：您可能希望從 .s-img-1 類中刪除 margin-right: 70vw 屬性，因為它會導致圖像位於 div 的右側。

Answer 2

帶背景圖片：

 div.circle { background-position: center; background-repeat: no-repeat; background-size: cover; border-radius: 100%; width: 164px; aspect-ratio: 1 / 1; }

 <div class="services"> <div class="s-text"> <h2>Services</h2> </div> <div class="circle" style="background-image: url(https://thispersondoesnotexist.com/image)"></div> </div>

---

使用您的代碼，您需要更改您的 css（如果您不想使用背景圖片）：

• s-circles-1 class：設置overflow:hidden;
• s-img-1 class：設置width:100%; 和height:100%;

 .s-circles-1 { display: inline-block; opacity: 0.5; width: 164px; aspect-ratio:1 / 1; /* Keep the same width */ border-radius: 100%; overflow: hidden; }.s-circles-1 img { opacity: 0.9; width: 100%; height: 100%; }

 <div class="services"> <div class="s-text"> <h2>Services</h2> </div> <div class="s-circles-1"> <img src="https://thispersondoesnotexist.com/image" alt=""> </div> </div>

---

使用您的代碼，但如果您的圖像不是正方形：

 div.circle { display: flex; justify-content: center; align-items: center; border-radius: 100%; width: 164px; aspect-ratio: 1 / 1; overflow: hidden; } div.circle img { /*if width > height*/ height: 164px; /*if height > width*/ /*width: 164px;*/ }

 <div class="services"> <div class="s-text"> <h2>Services</h2> </div> <div class="circle"> <img src="https://dummyimage.com/1200x500/000/fff" alt="" class="circle"> </div> </div>