Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 458
Andu Avatar asked Jul 05 '16 14:07

Andu


People also ask

Can I use Calc in CSS?

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.

What is use of scale () function with transform property?

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.

Can I use Calc in padding?

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.

Can I use Calc for margin CSS?

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.


1 Answers

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;   

}
like image 200
Mihai T Avatar answered Oct 19 '22 11:10

Mihai T