I'm trying to calculate the right scale to apply to children inside a parent but i can't use calc()
inside transform: scale
CSS function.
I've done this function with javascript but i'm interested in a pure CSS solution to avoid bloating the page with scripts as much as possible.
Example: CSS
.anyclass{
height:250px; /*this value can change dinamically */
transform:scale(calc(100% / 490 )); /*is using height value*/
}
This definition gives back an invalid property value. Other uses like translate:
.anyclass{
transform:translate(calc(100% - 50px ));
}
works with no problem. Is there anyway I could use calc to calculate the right scale of a div using only CSS?
Edit: To explain it better, is not a problem about findind a value between 0 and 1 as the calculation does that. I just get invalid property value if i use percentages.
TEST 1 I tried with CSS3 variables with no result in Scale function
--height: calc(100% + 0px);
/* height: calc(var(--height) / 490); Calculates the right value: 0.5 */
--soom: calc(var(--height) / 490);
/* height: var(--soom); has the right value: 0.5 */
transform: scale(var(--soom)); /*Does not operate in the value stored in --soom*/
It seems to accept the values in chrome, but does not operate the scale.
ZOOM CSS property seems to work fine only in chrome thou. This works fine.
zoom: calc(100% / 1.490); /* It needs the original value to be divided by 1000 to work properly*/
Working example:
In the Url:MiWeb the DIV with the class: class="cs_6c537e46d973809bcbd9abb882d9c7db cssprite" has a background-image property because it uses an sprite as source. CSS
background-position: 0 -840px;
width: 800px;
height: 490px;
background-image: url(https://cdn.arturoemilio.es/wp-content/cache/CSS_Sprite/93db60ac3df9134d96d56dd178d4ebf3279fdb39_S.png);
background-repeat: no-repeat;
display: inline-block;
position: initial;
Now the original image is bigger than the visible div (height:250px aprox)
, I'd like to scale the image using only CSS as I'd like to avoid to use JS for better compatibility with browsers with JS blocked.
Id like to scale that background image to the right size were the correct value would be 250px / 490px (scale(calc(100% / 490)). The CSS is generated before the output and in other parts of the CMS so i can not know the actual size of the parent DIV when the CSs rules are generated.
calc() The calc() CSS function lets you perform calculations when specifying CSS property values. It can be used anywhere a <length> , <frequency> , <angle> , <time> , <percentage> , <number> , or <integer> is allowed.
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.
A solution for you would be to use CSS calc, it has good browser support and fixes your issue in quite a simple manner. The only downside here is that it doesn't calculate the padding-top in % but you simply cannot calculate padding-top in % from the height of the element unless you use javascript.
You can use calc() anywhere where you would use numeric values (e.g.: width, max-height, margin-left, …) Can I Use calc? Data on support for the calc feature across the major browsers from caniuse.com.
you can use calc
but you cannot use percentage in transform:scale
but just think that 1 = 100% so if the value of 100%
changes , the value of 1
will change also
for eg : if 100% = 450px and then that value changes to 250px , the value of 1 = 250px = 100%
see here jsfiddle
code :
.parent {
width:200px;
background:blue;
height: 100%;
}
.child {
transform:scale(calc(1/2));
background:red;
}
if you REALLY want to use percentage , you have to use JQ
or you can give us a working example where you think you need only percentage
EDIT :
for your example . use this
.et_pb_portfolio_item:last-child .et_pb_portfolio_image.landscape > div {
background-position:center center!important;
width:100%!important;
height:100%!important;
}
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