Отзывчивый кружок с текстом и изображением внутри - PullRequest
Новая
       17

Отзывчивый кружок с текстом и изображением внутри

1 голос
/ 24 января 2020

Вначале я должен сказать, что я просматривал много, казалось бы, похожих вопросов, но большинство из них округляют только текст или только изображение, и в моем случае это их оба, которые вряд ли могут различаться в соответствии с примеркой.

Чего я хочу достичь:

Создайте контейнер с комбинацией центрированного текста и изображения в круглом круге (то же самое) ширина / высота) отзывчиво. например, добавление их в 4x столбец-3 должно сделать 4 меньших круглых круга, а добавление одного внутри столбца-9 должно создать один огромный круглый круг.

То, что у меня уже есть: Я могу чтобы увидеть эффект, который я ожидал увидеть следующим образом:

  • передача свойства width и height в контейнер
  • изменение размера шрифта
  • изменение максимальной высоты

Вот пример: 

.info-graphic-container {
  width: 512px;
  height: 512px;
  background-color: GRAY;
  border-radius: 100%;
  text-align: center;
}

.info-graphic-number {
  font-size: 150px;
  line-height: 1;
}

.info-graphic-icon {
  //added max height 60%, because cake image has 512x512 size
  max-height: 60%; 
  object-fit: contain;
}
<!-- This works, but values are hardcoded -->
<div class="info-graphic-container">
  <div class="info-graphic-number">18+</div>
  <img class="info-graphic-icon" src="https://image.flaticon.com/icons/svg/918/918234.svg">
</div>


<!-- This should make one huge circle (same width&height) -->
<div class=col-lg-12>
  <div class="info-graphic-container">
    <div class="info-graphic-number">18+</div>
    <img class="info-graphic-icon" src="https://image.flaticon.com/icons/svg/918/918234.svg">
  </div>
</div>

<!-- And this should make 4 circles (same width&height) -->
<div class=col-lg-3>
  <div class="info-graphic-container">
    <div class="info-graphic-number">18+</div>
    <img class="info-graphic-icon" src="https://image.flaticon.com/icons/svg/918/918234.svg">
  </div>
</div>
<div class=col-lg-3>
  <div class="info-graphic-container">
    <div class="info-graphic-number">18+</div>
    <img class="info-graphic-icon" src="https://image.flaticon.com/icons/svg/918/918234.svg">
  </div>
</div>
<div class=col-lg-3>
  <div class="info-graphic-container">
    <div class="info-graphic-number">18+</div>
    <img class="info-graphic-icon" src="https://image.flaticon.com/icons/svg/918/918234.svg">
  </div>
</div>
<div class=col-lg-3>
  <div class="info-graphic-container">
    <div class="info-graphic-number">18+</div>
    <img class="info-graphic-icon" src="https://image.flaticon.com/icons/svg/918/918234.svg">
  </div>
</div>

http://jsfiddle.net/degath/mfzvLwh5/25/

Что именно я прошу:

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

PS. кажется, что stackoverflow отображает его иначе, чем jsfiddle, где дисплей выглядит чище.

...