图片重叠 div

Question

我想做成这样： View Image

这里圆圈是图片。

我试过了。但是当我调整 window 大小时，图像圆圈移动会改变它的位置。我该如何解决。

<div class="main">
    <img src=''>
    <div>Text Text Text</div>
</div>


.main {       
        background-color: #fbd449;
        border-radius: 4.5px;
        padding: 0.5rem 3rem;
        position: relative;
        margin-left: 9rem;
}

img {
        position: absolute;
        background-color: chocolate;
        width: 9rem;
        height: 9rem;
        top: -12%;
        border-radius: 50%;
        left: -20%;
}

同样，对于较小的屏幕，div 高度会增加，但图像高度相同。如果可以的话你也能帮我解决这个问题吗

Answer 1

如果您希望它始终处于固定位置，那么使用 % 可能不是最好的主意。复制并粘贴下面的代码而不是您的 CSS，看看它是否对您有帮助。它不是您共享图片的精确复制品，但您可以使用正确的尺寸和位置来调整它以使其适合您的网站。

.main { 
  background-color: #fbd449;
  border-radius: 4.5px;
  padding: 0.5rem 3rem;
  position: relative;
  margin-left: 9rem;
  width:12rem;
  height: 3rem;
}

img {
  position: absolute;
  background-color: chocolate;
  width: 7rem;
  height: 7rem;
  margin-left:-4rem;
  margin-top:-2rem;
  border-radius: 50%;
}

.main > div {
  padding-left:4rem
}

Answer 2

这是我认为您正在寻找的解决方案..

如果您使用 %，则移动设备上的输出会有所不同。

在 class .main 和 img 中，您可以根据自己的选择更改高度和宽度

.main {
  background-color: #fbd449;
  border-radius: 4.5px;
  padding: 0.5rem 3rem;
  position: fixed;
  margin-left: 9rem;
  top: 25px;
  left:-5px;
  height: 100px;
  width: auto;
  overflow: hidden;
}

img {
  position: fixed;
  background-color: chocolate;
  width: 9rem;
  height: 9rem;
  top: 12px;
  border-radius: 50%;
  left: 40px;
}

<div class="main">
  <img src=''>
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>

Answer 3

对 css

做了一些改动

.main {       
        background-color: #fbd449;
        border-radius: 4.5px;
        padding: 0.5rem 5rem 0.5rem 9rem;
        position: relative;
        margin:2rem 9rem 0;
        width:100%;
        height:7rem;
        border-radius:10px;
        box-sizing:border-box;
}

img {
        position: absolute;
        background-color: chocolate;
        width: 9rem;
        height: 9rem;
        top: -1rem;
        border-radius: 50%;
        left: -1.5rem;
}

图片重叠 div

image overlapping a div

html

css

position