Могу ли я использовать Calc внутри функции Transform:Scale в CSS?

Я пытаюсь вычислить правильную шкалу, чтобы применить к детям внутри родителя, но я не могу использовать calc() внутри transform: scale Функция CSS Я сделал эту функцию с помощью javascript, но меня интересует чистое решение CSS, чтобы избежать как можно больше раздувания страницы скриптами.

Пример: CSS

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

Это определение возвращает недопустимое значение свойства. Другие виды использования, такие как перевод:

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

работает без проблем. В любом случае я мог бы использовать calc для вычисления правильного масштаба div, используя только CSS?

Изменить: Чтобы объяснить это лучше, это не проблема для findind значение между 0 и 1, как это делает расчет. Я просто получаю недопустимое значение свойства, если я использую проценты.

Тест 1 Я пытался с переменными CSS3 без результата в функции Scale

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

Кажется, принимает значения в Chrome, но не работает шкала.

Свойство ZOOM CSS работает нормально только в Chrome. Это отлично работает.

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

Рабочий пример:

В URL: MiWeb DIV с классом: class="cs_6c537e46d973809bcbd9abb882d9c7db cssprite" имеет свойство background-image, потому что он использует спрайт в качестве источника. 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;

Теперь исходное изображение больше видимого div (height:250px aprox), я хотел бы масштабировать изображение, используя только CSS, так как я хотел бы избежать использования JS для лучшей совместимости с браузерами с заблокированным JS.

Я хотел бы масштабировать фоновое изображение до нужного размера, если бы правильное значение было 250px / 490px (scale (calc (100% / 490)). CSS генерируется перед выводом и в других частях CMS, поэтому я не могу знать фактический размер родительского DIV при создании правил CS.

Источник

6 ответов

Вы можете использовать calc но вы не можете использовать процент в transform:scale

но просто подумайте, что 1 = 100%, так что если значение 100% изменения, стоимость 1 также изменится

например: если 100% = 450px, а затем это значение меняется на 250px, значение 1 = 250px = 100%

смотри здесь jsfiddle

код:

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

}

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

если вы действительно хотите использовать процент, вы должны использовать JQ

или вы можете дать нам рабочий пример, где вы думаете, что вам нужен только процент

РЕДАКТИРОВАТЬ:

для вашего примера. использовать этот

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

}
Источник

Масштаб должен быть плавающим между 0 и 1. Используйте transform: scale(calc(1 / 2)) вместо этого: https://jsfiddle.net/L1w7501o/

Источник

Вы можете определить calc в корне и использовать его в масштабе, но не поддерживаете + and -. использовать * or /

Источник

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

      el.style.height = `${height}px

делай также

      el.style.setProperty('--height-in-pixels', `${height}`

тогда в css можно использовать эту переменную, например, если вам нужно увеличить масштаб плюс 10 пикселей, тогда:

      el {
  scale: calc(1 + 10 / var(--height-in-pixels)
}
Источник

Попробуй это calc() работает как с парящим селектором, так и без него. Но вам нужно использовать значение, которое им уже присвоено, например, для scale(0,1) Вы должны использовать значение между 0 а также 1, То же самое для перевода вы должны использовать px или же % значение.

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

Масштаб

  .any:hover{
       transform:scale(calc(1/2));
}
Источник

просто вы можете использовать transform: scale(calc(1 / 2)) :П

Источник
Другие вопросы по тегам