изображение, перекрывающее div

Question

Я хочу сделать вот так: Просмотр изображения

Здесь круг - изображение.

Я пробовал это. Но когда я изменяю размер окна, кружок изображения смещается и меняет свое положение. Как я могу это исправить.

<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

вот решение, которое, я думаю, вы ищете ..

если вы используете %, то вывод на мобильном устройстве будет другим.

в классах .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 2

Внесены некоторые изменения в 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;
}

Answer 3

Если вы хотите, чтобы он всегда был в фиксированном положении, то, вероятно, использование% - не лучшая идея. Скопируйте и вставьте приведенный ниже код вместо 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
}