Kann ich Calc in Transform: Scale-Funktion in CSS verwenden?

Question

Ich versuche, die rechte Skala zu berechnen, um Kinder in einem Elternteil gelten, aber ich kann nicht calc() innerhalb transform: scale CSS-Funktion verwenden. Ich habe diese Funktion mit Javascript gemacht, aber ich bin an einer reinen CSS-Lösung interessiert, um zu vermeiden, dass die Seite mit Skripten so viel wie möglich aufgebläht wird.

Beispiel: CSS

.anyclass{ 
    height:250px; /*this value can change dinamically */ 
    transform:scale(calc(100%/490)); /*is using height value*/ 
    } 

Diese Definition gibt einen ungültigen Eigenschaftswert zurück. Andere Verwendungen übersetzen mag:

.anyclass{ 
transform:translate(calc(100% - 50px)); 
} 

funktioniert ohne Probleme. Gibt es sowieso ich könnte Calc verwenden, um die richtige Skalierung eines Div mit nur CSS zu berechnen?

Edit: Um es besser zu erklären, ist kein Problem, einen Wert zwischen 0 und 1 zu finden, wie die Berechnung das tut. Ich erhalte nur einen ungültigen Eigenschaftswert, wenn ich Prozentsätze verwende.

TEST 1 habe ich versucht, mit CSS3 Variablen ohne Ergebnis in Waagenfunktion

--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*/ 

Es scheint, die Werte in Chrom zu akzeptieren, aber nicht arbeitet die Waage.

ZOOM CSS-Eigenschaft scheint nur in Chrom gut zu funktionieren. Das funktioniert gut.

zoom: calc(100%/1.490); /* It needs the original value to be divided by 1000 to work properly*/ 

Arbeitsbeispiel:

Im Url: MiWeb das DIV mit der Klasse: class = "cs_6c537e46d973809bcbd9abb882d9c7db cssprite" hat eine Eigenschaft background-image, weil es eine Sprit als Quelle verwendet. 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; 

nun das Originalbild ist größer als die sichtbare div (Höhe: 250px ca.), würde Ich mag das Bild skalieren mit CSS nur als i JS zu verwenden, um vermeiden möchten, dass für bessere Kompatibilität mit Browsern mit JS blockiert.

Id mag das Hintergrundbild auf die richtige Größe skaliert waren der richtige Wert 250px/490px (Skala (ber (100%/490)) sein würde. Die CSS vor dem Ausgang erzeugt wird, und in anderen Teilen der CMS, so kann ich nicht die tatsächliche Größe des übergeordneten DIV kennen, wenn die CS-Regeln generiert werden

Answer 1

Maßstab sollte ein Float zwischen 0 und 1 sein.Verwenden Sie transform: scale(calc(1/2)) statt: https://jsfiddle.net/L1w7501o/

Answer 2

Sie können Verwendung calc aber nicht Prozentsatz in transform:scale

verwenden, aber man denke nur, dass 1 = 100% so, wenn der Wert von 100% ändert, wird der Wert von 1 wird sich ändern auch

zum Beispiel: wenn 100% = 450px und dann, dass Wertänderungen zu 250 Pixeln, der Wert von 1 = 250 Pixel = 100%

sehen hier jsfiddle

Code:

.parent { 
width:200px; 
background:blue; 
height: 100%; 

} 

.child { 
    transform:scale(calc(1/2)); 
    background:red; 
} 

wenn Sie wirklich Prozentsatz verwenden möchten, müssen Sie JQ verwenden

oder Sie können uns ein funktionierendes Beispiel geben, wo Sie denken, benötigt nur Prozentsatz

EDIT:

für Ihr Beispiel. Verwenden Sie diese

.et_pb_portfolio_item:last-child .et_pb_portfolio_image.landscape > div { 
    background-position:center center!important; 
    width:100%!important; 
    height:100%!important; 

} 

Answer 3

Versuchen Sie diese calc() funktioniert sowohl mit Hover-Selektor und ohne dass auch. Sie müssen jedoch Werte verwenden, die ihnen bereits zugewiesen sind, z. B. für scale(0,1) müssen Sie den Wert zwischen 0 und 1 verwenden. Gleiches gilt für den Wert px oder %.

.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*/ 
    } 

Maßstab

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