Рассчитайте div ширину / высоту внутри трансфокации масштаба / масштаба

Question

У меня есть div внутри другого div с примененной шкалой преобразования.

Мне нужно получить ширину этого деления после применения масштаба. Результатом .width () является исходная ширина элемента.

Пожалуйста, посмотрите эту кодовую ручку: https://codepen.io/anon/pen/ZMpBMP

Изображение проблемы:

Надеюсь, это достаточно ясно, спасибо. Код ниже:

---

HTML

<div class="outer">
  <div class="inner">
  </div>
</div>

CSS

.outer {
  height: 250px;
  width: 250px;
  background-color: red;
  position: relative;
  overflow: hidden;
}

.inner {
  background-color: green;
  height: 10px;
  width: 10px;
  transform: translate(-50%);
  position: absolute;
  top: 50%;
  left: 50%;

  transform: scale(13.0);
}

JS

$(function() {

   var width = $('.inner').width();

   // I expect 130px but it returns 10px
   //
   // I.e. It ignores the zoom/scale
   //      when considering the width
   console.log( width );

});

Answer 1

я достиг твоих 130 этим

var x = document. getElementsByClassName('inner');
var v = x.getBoundingClientRect();
width = v.width;

Answer 2

Использование getBoundingClientRect()

$(function() {

   var width = $('.inner')[0].getBoundingClientRect();
   // I expect 130px but it returns 10px
   //
   // I.e. It ignores the zoom/scale
   //      when considering the width
   console.log(width.width);

});

https://jsfiddle.net/3aezfvup/3/

Answer 3

Вам нужно рассчитанное значение. Это можно сделать в CSS.

Используйте calc () для вычисления ширины <div> элемента, который может быть любым элементом:

#div1 {
    position: absolute;
    left: 50px;
    width: calc(100% - 100px);
    border: 1px solid black;
    background-color: yellow;
    padding: 5px;
    text-align: center;
}

---

Я нашел это об этой теме.

Могу ли я использовать Calc внутри функции Transform: Scale в CSS?

---

Для JS:

Как получить фактическую ширину и высоту HTML-элемента?