Как сделать текст в центре адаптивной круглой картинки?

Question

[yoyoyooyoyoyoyoyoyoyoyoyo]

Имеется 2 колонки на бутстрапе, в правой колонке картинка (круг), в которой должен быть текст. Никак не получается сверстать так, чтобы присутствовала адаптивность для картинки круга с текстом при скукоживании окна браузера.
В скриншоте пример того, как должно быть.

Answer 1

[SuperZombi]

Либо в img указать align
align="bottom"
либо vertical-align

Второй вариант это сделать position
position: absolute;
или position: relative;

Comments

[yoyoyooyoyoyoyoyoyoyoyoyo]

<div class="krug">

<div class="text">
  <img src="images/star.png" alt="star" title="star"><p>тексттекст текст текст текст текст текст текст текст текст текст текст текст текст текст  .</p>
  <img src="images/heart.png" alt="heart" title="heart"><p>тексттекст текст текст текст текст текст текст текст текст текст текст текст текст текст  .</p>
  <img src="images/case.png" alt="case" title="case"><p>тексттекст текст текст текст текст текст текст текст текст текст текст текст текст текст  .</p>
  </div></div>

.krug {
    background-image: url(../images/natal-map.png);
    background-size: auto;
    background-repeat: no-repeat;
    height: 100%;
    position:relative;
}

.ikonki {
    text-align: center;
    position: absolute;
    top: 390px;
    left: 210px;
    width: 860px;
}

.ikonki p {
    text-align: center;
    font-size: 15px;
    font-family: 'jost light';
    margin-left: 70px;
    color: #fff;
    padding-right: 15px;
    width: 50%;
    margin: 0 auto;
}

.ikonki img {
    padding-bottom: 10px;
    padding-top: 10px;
}

[yoyoyooyoyoyoyoyoyoyoyoyo]

У меня сейчас так. Похоже на ваше решение с позициями ? Единственное, что это не адаптивное. Картинка не уменьшается

Answer 2

[Олег]

<div class="ratio ratio-1x1" style="border: 5px solid black; border-radius:50%">
      <div class="ratio ratio-1x1" style="border: 5px solid white; border-radius:50%">
            <div class="ratio ratio-1x1" style="border: 5px solid black; border-radius:50%">
                  .... содержимое круга
            </div>
      </div>
</div>

Размер круга будет зависеть от ширины родителя, в котором он размещён.

Comments

[yoyoyooyoyoyoyoyoyoyoyoyo]

Благодарю за ответ, но как поступить, если круг - картинка ?

[Дима]

yoyoyooyoyoyoyoyoyoyoyoyo, можно сделать прозрачный div с border-radius: 50% и залить его background вашей картинкой со свойством background-size: cover

[yoyoyooyoyoyoyoyoyoyoyoyo]

Спасибо, попробую

[Олег]

yoyoyooyoyoyoyoyoyoyoyoyo, и несколько media запросов, чтобы внутренний контент ужимался так, чтобы оставался внутри нужного радиуса

[yoyoyooyoyoyoyoyoyoyoyoyo]

Олег, Сделал так, но круг обрезан на 70%

.krug {
    border-radius: 50%;
    background-image: url(../images/natal-map.png);
    background-size: cover;
    background-repeat: no-repeat;
    height: 100%;
    background-color: transparent;
}

<div class="krug"> </div>

[Олег]

yoyoyooyoyoyoyoyoyoyoyoyo, для обрезки круга - можно поместить его в контейнер с CSS свойством overflow: hidden; а самому кругу задать смещение через top и left