Redimensionnement de l'image proportionnellement via css

Question

Je sais que cette question a été posée un million de fois auparavant, mais j'essaie de le faire d'une manière différente, beaucoup plus simple car je n'ai pas besoin de supporter tous les principaux navigateurs. Pour chaque image sur notre site, nous connaissons la largeur et la hauteur avant l'exécution car le cdn nous renvoie cette information, une fois une image enregistrée, j'extrais en gros la largeur du CURRENT et détermine le pourcentage de diminution (le cas échéant) de cette image.

Exemple:

var originalWidth = 640; 
var originalHeight = 480; 
var actualWidth = 431; 
var decrease = (originalWidth-actualWidth)/originalWidth*100; 

Maintenant que j'ai la baisse par rapport à sa taille d'origine, je voulais faire quelque chose avec la méthode css calc, car toutes nos images redimensionnez proportionnellement. Je l'ai essayé ceci:

$element.css('height', `calc(${originalHeight}px - (${originalHeight}px * ${decrease}/100))`); 

J'ai ne peut même pas cette option pour appliquer à l'élément, si je fais une méthode css calc beaucoup plus simple que cela fonctionne, mais appliquent cette habitude même, je suppose c'est parce que l'évaluation réelle est un échec, mais je ne peux pas sembler obtenir les bonnes unités

Answer 1

peut-être qu'il est seulement un problème de parenthèse, essayez avec ce

$element.css('height', `calc((${originalHeight}px - ((${originalHeight}px * ${decrease})/100)))`);