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.

回答1:

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

回答2:

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));
}

回答3:

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;   

}

来源：https://stackoverflow.com/questions/38205885/can-i-use-calc-inside-transformscale-function-in-css

标签

css3

transform

scale

css-calc