20

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.

Alireza Ahmadi
  • 8,579
  • 5
  • 15
  • 42
Andu
  • 209
  • 1
  • 2
  • 5

5 Answers5

2

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;   

}
Mihai T
  • 17,254
  • 2
  • 23
  • 32
  • You are right, i added a working live example in the opening post with access to the url i'd like to adapt. – Andu Jul 05 '16 at 15:19
  • not sure what are you trying to do there. you want ( in the top right corner box ) to make the background-image to have the `width` and `height` of the container `et_pb_portfolio_image` ? – Mihai T Jul 05 '16 at 15:28
  • Yes, the original clip from the sprite is 800*490px. The DIV where the background-image is placed is 330*248px. Because i'm using background-image and the original image is an Sprite i can't use background-size:cover; as the total size of the sprite inlcudes other images. If you test adding transform:scale(0.5) to that same div i'm pointing out you'll see how the full image is shown, now it's just a portion of it. – Andu Jul 05 '16 at 15:31
  • That last example doesn't work as the image is coming from an Sprite. Background-position:center center, doesn't show the right portion of the image. – Andu Jul 05 '16 at 17:00
  • Thank you. Clear. Like the OP I was barking up the wrong tree thinking that `calc` within `transform: scale` was the issue. – Luke Apr 03 '17 at 10:04
0

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

powerbuoy
  • 12,460
  • 7
  • 48
  • 78
  • 3
    But if i want to use percentage instead a fixed value? Because i'm calculating the scale of the content based in the height of the div? – Andu Jul 05 '16 at 14:38
  • I'm not sure I understand why you have to use (for example) 100% or 64% or 30% instead of just using 1, 0.64 and 0.3 instead? – powerbuoy Jul 05 '16 at 20:44
  • 5
    He wants the object to maintain the same aspect ratio as the user scales the page. So when the user resizes the page down, the div scales the contents linearly. – baash05 Jan 24 '19 at 01:27
0

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>
Hossein Azizdokht
  • 748
  • 3
  • 17
-1

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));
}
frnt
  • 8,455
  • 2
  • 22
  • 25
  • I need scale to work, not translate as is written in the opening post. But thanks anyway. – Andu Jul 05 '16 at 15:00
  • @Andu Okay. But in starting you were trying to scale(100%/490). So that's what I'm saying calc() works with transform but you have to assign value to them according to there rules. – frnt Jul 05 '16 at 15:05
-3

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

neel upadhyay
  • 344
  • 2
  • 10
  • While this code may solve the question, [including an explanation](//meta.stackexchange.com/q/114762) of how and why this solves the problem would really help to improve the quality of your post, and probably result in more up-votes. Remember that you are answering the question for readers in the future, not just the person asking now. Please [edit] your answer to add explanations and give an indication of what limitations and assumptions apply. – Yunnosch Jun 28 '21 at 05:55