Пропорциональное изменение размера изображения через css

Я знаю, что этот вопрос задавался уже миллион раз, однако я пытаюсь сделать это по-другому, намного проще, потому что мне не нужно поддерживать все основные браузеры.

Для каждого изображения на нашем сайте мы знаем ширину и высоту перед выполнением, так как cdn возвращает нам эту информацию, как только изображение регистрируется, я в основном извлекаю ТЕКУЩУЮ ширину и вычисляю процентное уменьшение (если есть) этого изображения.

Пример:

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

Теперь, когда у меня есть уменьшение по сравнению с исходным размером, я хотел сделать что-то с методом calc css, поскольку все наши изображения изменяются пропорционально. Я пробовал это:

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

Я даже не могу заставить это применить к элементу, если я сделаю гораздо более простой метод calc css, он сработает, но это даже не будет применяться, я предполагаю, что это потому, что фактическая оценка терпит неудачу, но я не могу вроде правильно определил единицы


image css aspect-ratio calc
person Shannon Hochkins    schedule 23.04.2017    source источник
comment
Я только что проверил калькулятор со значениями, и он работает. Что ваш calc(${originalHeight}px - (${originalHeight}px * ${decrease} / 100 )) оценивает после обработки переменных?   -  person Ason    schedule 23.04.2017
comment
Он не поддерживает выражение, он просто выводит height: calc(326.6px) @LGSon   -  person Shannon Hochkins    schedule 23.04.2017
comment
Что ж, это не сработает, так как для calc нужно минимум 2 значения, и оно должно выглядеть примерно так: calc(200px - (50px * 50 / 100 ))   -  person Ason    schedule 23.04.2017
comment
Может быть, если вы опубликуете минимальный рабочий пример кода, мы сможем что-то придумать на основе того, чего вы на самом деле хотите достичь.   -  person Ason    schedule 23.04.2017
comment
Что ты пытаешься сделать? Можете ли вы дать нам пример использования какой бы ни была конечная цель?   -  person Michael Coker    schedule 23.04.2017
comment
В основном пытаясь найти способ с помощью метода calc динамически изменять высоту изображения до его загрузки, чтобы к моменту его загрузки оно не изменяло высоту области просмотра при рендеринге.   -  person Shannon Hochkins    schedule 23.04.2017

Ответы (1)


arrow_upward
0
arrow_downward

Может быть, это только проблема со скобками, попробуйте с этим

$element.css('height', `calc((${originalHeight}px - ((${originalHeight}px * ${decrease}) / 100 )))` );
person shall    schedule 23.04.2017
comment
Так что получается, что я пытался быть умным, но это уравнение всегда будет возвращать один и тот же результат, поэтому использовать метод calc бессмысленно! - person Shannon Hochkins; 23.04.2017