Как рассчитать значения на которые произошел scale?

Question

[EryTi]

Вот примерный код: https://codepen.io/T_Erm/pen/MWROpJd?editors=1100

Проблема в том, что когда происходит уменьшение масштаба у блока с классом "card", то сам размер блока не изменяется и появляется зеленый фон(размер блока не меняется) от блока с классом "container". Я думаю нужно добавить отрицательные margin к блоку "card" на столько пикселей на сколько был уменьшен масштаб, но здесь не обойтись без js. К тому же контент блоков генерируются динамически. - Есть ли другие варианты решения используя только css?
То есть, если в общем, есть определенный блок на странице, которому нужно уменьшить масштаб, но при этом чтобы соседние блоки восприняли изменение масштаба как изменение размера и подстроились под него

Comments

[IvanU7n]

в текущем виде не понятно зачем там вообще .container

[EryTi]

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

[IvanU7n]

EryTi, если не важен firefox, то zoom
или кастомное свойство с масштабом и calc() для всех значимых свойств
но при необходимости это дело анимировать лучше таким не заниматься

[Ankhena]

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

В текущем коде уменьшать нужно container либо вообще его убрать.

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

Нормальным представляется решение сразу менять размеры, а не масштаб.

[EryTi]

Ankhena, дело в том, что блок не должен подвергаться адаптиву. То есть, если блок шириной например 500px, на мобильном устройстве текст перенесется на новую строку, если использовать адаптивную верстку, с изменением разме а нужно чтобы все элементы располагались в том же виде, что и на десктопе. По этому используется масштабирование

[Ankhena]

EryTi,

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

Если блоку задать размер 500px и запретить всякие flex-shrink и т.д., то он так и останется шириной 500px.

Также есть мета тег vieport и фиксированная ширина в нем вместо device-width
Либо использование единиц vw (vh, vmin, vmax) как раз для масштабирования. И функции min, max и clamp, чтобы совсем не увлечься.

Правда, нужно понимать, что есть и минимальный размер шрифта меньше которого он не станет. Но с другой стороны, если scale решит эту проблему и шрифт уменьшится меньше минимального, то посетитель всё равно вас пошлет, потому что всё равно ничего не разглядит.

[leeroyjenkins176]

Я думаю нужно добавить отрицательные margin к блоку "card" на столько пикселей на сколько был уменьшен масштаб, но здесь не обойтись без js

Это можно сделать так

.card {
container-type: inline-size;
margin: -10cqw; // scale 0.9
}