Menu
I'm wondering how I can get the scale value of an element?
I have tried $(element).css('-webkit-transform'); which returns matrix(scaleX,0,0,scaleY,0,0); Is there a way of getting scaleX and scaleY only?
737
A way to just get the scale values might be to remove any transforms, measure the computed width/height of the element and then add them back and measure again. Then divide new/old values.
scale() The scale() CSS function defines a transformation that resizes an element on the 2D plane. Because the amount of scaling is defined by a vector, it can resize the horizontal and vertical dimensions at different scales. Its result is a <transform-function> data type.
If your image doesn't fit the layout, you can resize it in the HTML. One of the simplest ways to resize an image in the HTML is using the height and width attributes on the img tag. These values specify the height and width of the image element. The values are set in px i.e. CSS pixels.
The scale property accepts the none keyword, or up to three numeric values. A single numeric value scales the element along the X (horizontal) and Y (vertical) axes by the same value. If two values are provided, the first one scales the X-axis and the second scales the Y-axis.
The simplest solution to find out the scale factor between the document and an element is the following:
var element = document.querySelector('...'); var scaleX = element.getBoundingClientRect().width / element.offsetWidth; This works because getBoundingClientRect returns the actual dimension while offsetWidth/Height is the unscaled size.
112
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
