Scale, как привести к единому коэффициенту увеличения?

Question

[Дмитрий]

Добрый день!
Столкнулся с проблемой при использовании свойства scale. Опишу ситуацию, есть три картинки, чисто для примера. Каждая картинка имеет свои размеры, например: 200х600, 350х100, 640х320, все просто! Далее, по событию hover, я хочу увеличить картинку на которую попал курсор, для всех картинок задан одинаковый коэффициент scale, например: 1.2. На этом момент возникает проблема, каждая картинка увеличивается относительно своих размеров, увеличение получается разным. Тоже самое происходит и с блоками которым заданы разные размеры.

Как можно сделать увеличение полностью идентичным для всех изображений, любого размера?

ПС

Можно конечно подбирать увеличение для каждого изображения индивидуально, но проблема в том, что я не контролирую количество изображений как и их размеры.

Comments

[Вадим]

Полагаю картинки у Вас вписаны в какой то блок, а эти блоки в свою очередь формируют сетку, так?
То есть блоки то одного размера? То есть можно скейлить их, а не картинки внутри.

Если не так, то как вариант решения.

Но в идеале бы увидеть что в действительности у Вас есть и что Вы хотите получить.

[Дмитрий]

Вадим, Сетки нет, просто изображения, которые в свою очередь, находятся во flex контейнере и являются адаптивными.

[Froggyweb]

Можно попробовать width и calc, картинки при этом делать абсолютом

[Дмитрий]

Froggyweb, Без scale, через width + height или через margin, анимация дерганая, дрожащая, видно что костыль, плохо работает на FF, Chrome но на удивление, хорошо выглядит на Edge.

[Froggyweb]

Дмитрий, потому что идет перерендер. Сделай position absolute для анимированного блока

[Дмитрий]

Froggyweb, К сожалению, оно все равно выглядит хуже стандартного scale.

[Froggyweb]

Дмитрий, вроде норм
https://codepen.io/froggyweb/pen/wvyWrKN
что тебе надо - не известно

[Дмитрий]

Froggyweb, Выглядит неплохо!

[Сергей Сергей]

Так мне кажется

[Дмитрий]

Сергей Сергей, Похоже что да! Просто аплодирую стоя! Не знаю, сколько времени вы потратили на данное решение... Огромное спасибо! Буду разбираться, но уже завтра. Кст. я тоже сварганил решение на js, но там есть проблемы...

ПС: Разместите комментарий как отдельный ответ.

Answer 1

[Сергей Сергей]

_{Что ж, где-то 10 минут.}

Здесь кроется зависимость от предопределённых и записанных где-нибудь размеров элементов, чтобы расчёты для масштабирования работали как надо.

Comments

[Дмитрий]

Сегодня протестировал, реализовав адаптивность. Но! По факту, все равно неодинаково, есть разница.

[Сергей Сергей]

Дмитрий, Факт нужно подкрепить кодом, я не могу представить, в чём конкретно ошибка.
Уточняю по своему написанному. Масштабы по горизонтали и вертикали рассчитываются на основе предопределённых размеров, у меня это переменные-копии ширины и высоты. А раздельный расчёт масштабов по осям влечёт за собой непропорциональность и искажение, это придётся решать как-то иначе.

[Дмитрий]

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

[Сергей Сергей]

Дмитрий, https://developer.mozilla.org/ru/docs/Web/CSS/obje... вспомнил

[Дмитрий]

Сергей Сергей, Знаю, к сожалению, не подходит, смысла в этом свойстве, конкретно в данном случае, нет. Я думаю, можно улучшить вашу формулу, добавив соотношение сторон, которое можно получить с помощью уже имеющихся переменных. И тогда, как я предполагаю (но это неточно) можно обойтись одной цифрой для scale.