CODEWITHSUNDEEP
csstransformscalecss-calc
Andu
Andu

Reputation: 269

Can I use Calc inside Transform:Scale function in CSS?

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.

Upvotes: 26

Views: 39353

Answers (6)

Grief
Grief

Reputation: 2040

I solved a similar problem updating an extra css variable with the pixel value, so that I can use that variable in the calculation of scale. e.g. every time you do

el.style.height = `${height}px

do also

el.style.setProperty('--height-in-pixels', `${height}`

then in css it's possible to use that variable like if you need to scale up plus 10 pixels, then:

el {
  scale: calc(1 + 10 / var(--height-in-pixels)
}

Upvotes: 0

neel upadhyay
neel upadhyay

Reputation: 347

simple you can use transform: scale(calc(1 / 2)) :P

Upvotes: -3

Hossein Azizdokht
Hossein Azizdokht

Reputation: 1015

You can define calc in root and use that in scale, but not support + and -. use * or /

  :root{
    --calc : calc(100%*3);
  }
  .parent {
    width:200px;
    background:blue;
    height:auto;

  }
  
  .child {

   transform:scale(calc(var(--calc)/2));

   background:red;
   
   }
<div class="parent">


<div class="child">
BLALALALAL<br />
BABAKLALALA<br />
BALALALALA<br />
BALALALALA<br />
</div>
</div>

Upvotes: 0

Mihai T
Mihai T

Reputation: 17697

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;   

}

Upvotes: 3

frnt
frnt

Reputation: 8795

Try this calc() works both with hover selector and without that too. But you need to use value that are already assigned to them, like for scale(0,1) you have to use value between 0 and 1. Same for translate you have to use px or % value.

.any{
     height:250px; /*this value can change dinamically */
     background:#f22;
    transform:translate(calc(100px - 50px));
   }
   .any:hover{
   transform:translate(calc(100px - 80px)); /*is using height value*/
   }

Scale

  .any:hover{
       transform:scale(calc(1/2));
}

Upvotes: -1

powerbuoy
powerbuoy

Reputation: 12848

Scale should be a float between 0 and 1. Use transform: scale(calc(1 / 2)) instead: https://jsfiddle.net/L1w7501o/

Upvotes: 0

Related Questions