Как соответствовать ширине определенного дочернего элемента?

Question

проблема

Я пытаюсь создать индикатор навыков.
(я не мог задать следующий вопрос, почему, поэтому я создал новую учетную запись и спросил)

текущий статус:

Я хочу сопоставить ширину элемента с .meter.
Другими словами, как установить стандарт блока на .meter(дочерний элемент)?
(в приведенном выше gif месте img.meter)

Я хотел бы поле на основе .meter .. (сейчас figcaption является стандартом)
Ас тех пор как figcaption поднялся, я попытался исправить это, но это не сработало.
Еще немного, пожалуйста, поделитесь с вами своей мудростью!

Извините, если мой английский плохой.Если это сбивает с толку, пожалуйста, спросите меня:)

---

Полное изображение

Общая картина

Изображение "Потому чтоЯ хочу сделать это, я хочу основать эту ширину зеленого цвета (я думал, что это было легко изобразить)

код

html {
 font-size: 62.5%;
 }
.data {
 padding-top: 1.7rem;
 padding-bottom: 1.7rem;
 }
.skill li {
 display: flex;
 flex-wrap: wrap;
 align-content: space-between;
 }
 .skill li :last-child {
   margin-right: 0;
   }
.code {
 margin-top: 1.7rem;
 }
figure {
 margin-right: .9rem;
 font-size: 1rem;
 position: relative;
 height: 4.4rem;
 }
 figure > img {
   top: 0;
   bottom: 0;
   }
 figure > .meter {
   height: 4.4rem;
   position: absolute;
   transform: translate(-50%,-50%);
   top: 50%;
   left: 50%;
   }
 figure > figcaption {
   line-height: 1;
   text-align: center;
   }
.meter-t {
 height: 2.3rem;
 display: block;
 position: absolute;
 bottom: 0;
 right: 0;
 transform: translate(-50%,-50%);
 top: 50%;
 left: 50%;
 }
.PHP > .meter-t {
 width: 2.4rem;
 }

<section class="skill">
   <p class="title">skill</p>
   <ul class="data">
     <li class="tool">
       <figure class="Illustrator">
         <img class="meter" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221627.png" alt="advanced" />
         <img class="meter-t" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221624.png" alt="Illustrator" />
         <figcaption>Illustrator</figcaption>
       </figure>
       <figure class="Photoshop">
         <img class="meter" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221629.png" alt="intermediate" />
         <img class="meter-t" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221753.png" alt="Photoshop" />
         <figcaption>Photoshop</figcaption>
       </figure>
       <figure class="Indesign">
         <img class="meter" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221632.png" alt="elementary" />
         <img class="meter-t" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221719.png" alt="Indesign" />
         <figcaption>Indesign</figcaption>
       </figure>
       <figure class="Vectorworks">
         <img class="meter" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221629.png" alt="intermediate" />
         <img class="meter-t" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221747.png" alt="Vectorworks" />
         <figcaption>Vectorworks</figcaption>
       </figure>
       <figure class="Shade">
         <img class="meter" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221629.png" alt="intermediate" />
         <img class="meter-t" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221750.png" alt="Shade" />
         <figcaption>Shade</figcaption>
       </figure>
     </li>
     <li class="code">
       <figure class="HTML">
         <img class="meter" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221632.png" alt="elementary" />
         <img class="meter-t" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221722.png" alt="HTML" />
         <figcaption>HTML</figcaption>
       </figure>
       <figure class="CSS">
         <img class="meter" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221632.png" alt="elementary" />
         <img class="meter-t" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221725.png" alt="CSS" />
         <figcaption>CSS</figcaption>
       </figure>
       <figure class="Javascript">
         <img class="meter" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221634.png" alt="beginner" />
         <img class="meter-t" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221717.png" alt="Javascript" />
         <figcaption>Javascript</figcaption>
       </figure>
       <figure class="PHP">
         <img class="meter" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221634.png" alt="beginner" />
         <img class="meter-t" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221714.png" alt="PHP" />
         <figcaption>PHP</figcaption>
       </figure>
     </li>
   </ul>
 </section>

Answer 1

Вам разрешено использовать CSS-сетки?С его помощью это действительно легко сделать

figure {
  display: grid;
  grid-template: 'meter' auto 'name' min-content / 4.4rem; // set the size of the meter here!
  grid-row-gap: 1.5rem // just to space thing a little
}
figure img {
  grid-area: meter; //put both images on the same area so they overlap
  align-self: center; //center both horizontally and vertically
  justify-self: center;
}
figure .meter {
  width: 100%; // make it 100%, since the size is set on the grid template
}
figure .meter_t {
  height: 50%; // same as before, let the size be dictated by the grid
  width: 50%;
}
figure figcaption {
  grid-area: name; //put the name at the bottom
  justify-self: center; // so it overflows to the sides
}

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

https://codepen.io/anon/pen/zbOYPO

РЕДАКТИРОВАТЬ:добавлено центрирование заголовков