отрегулируйте CSS элемента датчика, не ломая

Question

Я просто пытаюсь сделать этот датчик меньше.Когда я пытаюсь это сделать (изменяю класс контейнера), он деформирует весь элемент датчика.Я изменяю положение на относительное, и край датчика, кажется, ломается.Любые идеи о том, как масштабировать это, не нарушая датчик?В конечном итоге я вложу это в колонку в начальной загрузке и просто попытаюсь заставить это работать на базовом уровне.Любой совет по этому вопросу CSS будет полезен

const Gauge = Vue.extend({
  template: `
    <div class="container">
      <div class="gauge-bg"></div>
      <div class="gauge-middle"></div>
      <div class="gauge-overlay" :style="{ transform: rotate }"></div>
      <div class="gauge-data">
        <span>{{ percentage }}%</span>
      </div>
    </div>
  `,
  props: ['percentage'],
  computed: {
    rotate() {
      const v = this.percentage * 180 / 100;
      return `rotate(${v}deg)`;
    } } });



new Vue({
  el: '#app',
  components: {
    Gauge 
  } 
});

body {
  background-color: #4d4d4d;
}
.container {
  width: 400px;
  height: 200px;
  position: absolute;
  top: 0;
  overflow: hidden;
}
.gauge-bg {
  z-index: 1;
  width: 400px;
  height: 200px;
  position: absolute;
  background-color: #a3f6ba;
  border-radius: 250px 250px 0 0;
}
.gauge-middle {
  z-index: 3;
  position: absolute;
  background-color: #4d4d4d;
  width: 250px;
  height: calc(250px / 2);
  top: 75px;
  margin-left: 75px;
  margin-right: auto;
  border-radius: 250px 250px 0 0;
}
.gauge-overlay {
  z-index: 2;
  position: absolute;
  background-color: #5df086;
  width: 400px;
  height: 200px;
  top: 200px;
  border-radius: 0 0 200px 200px;
  transform-origin: center top;
}
.gauge-data {
  z-index: 4;
  color: #5df086;
  position: absolute;
  width: 400px;
  bottom: 0;
  text-align: center;
  font-size: 24px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<gauge percentage="33"></gauge>
</div>

Answer 1

Быстрое и грязное решение заключается в использовании transform: scale():

.container {
  transform: scale(.5) translateY(-100%);
  transform-origin: 0 100%;
}

в сочетании с увеличением размера шрифта (необязательно).

Vue.config.devtools = false;
Vue.config.productionTip = false;

const Gauge = Vue.extend({
  template: `
    <div class="container">
      <div class="gauge-bg"></div>
      <div class="gauge-middle"></div>
      <div class="gauge-overlay" :style="{ transform: rotate }"></div>
      <div class="gauge-data">
        <span>{{ percentage }}%</span>
      </div>
    </div>
  `,
  props: ['percentage'],
  computed: {
    rotate() {
      const v = this.percentage * 180 / 100;
      return `rotate(${v}deg)`;
    } } });



new Vue({
  el: '#app',
  components: {
    Gauge 
  } 
});

body {
  background-color: #4d4d4d;
}
.container {
  width: 400px;
  height: 200px;
  position: absolute;
  top: 0;
  overflow: hidden;
  transform: scale(.5) translateY(-100%);
  transform-origin: 0 100%;
}
.gauge-bg {
  z-index: 1;
  width: 400px;
  height: 200px;
  position: absolute;
  background-color: #a3f6ba;
  border-radius: 250px 250px 0 0;
}
.gauge-middle {
  z-index: 3;
  position: absolute;
  background-color: #4d4d4d;
  width: 250px;
  height: calc(250px / 2);
  top: 75px;
  margin-left: 75px;
  margin-right: auto;
  border-radius: 250px 250px 0 0;
}
.gauge-overlay {
  z-index: 2;
  position: absolute;
  background-color: #5df086;
  width: 400px;
  height: 200px;
  top: 200px;
  border-radius: 0 0 200px 200px;
  transform-origin: center top;
}
.gauge-data {
  z-index: 4;
  color: #5df086;
  position: absolute;
  width: 400px;
  bottom: 0;
  text-align: center;
  font-size: 48px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<gauge percentage="33"></gauge>
</div>

Правильным решением было бы переписать свой CSS так, чтобы он принимал переменную ($gaugeWidth!?) И учитывал все жестко заданные размеры, чтобы он масштабировался правильно (что изначально должен был сделать оригинальный разработчик) ).