Emergency - CSS - Scale - Calc - Viewport

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

Мне нужно добавить функцию calc() в шкалу, но она просто не сработает. Не вдаваясь в подробности того, зачем мне это нужно, я знаю, что обычно есть лучшие способы сделать то, чего я хочу достичь, но я просто хочу знать, как я могу заставить это работать так, как мне нужно.

Я хочу, чтобы Transform: Scale() адаптировался по размеру относительно размера области просмотра. Я бы предположил, что из своего исследования я добавляю функцию calc(), используя 100vw и другие мои разработки.

Я указал, где я до сих пор ниже, функция масштабирования работает так, как должна, т.е. отдельные значения от 0 до 1 изменяют масштаб до 100%. Функция Calc() отлично работает с базовыми суммами, т.е. 10 - 5 дает значение 5 и масштабирование 500%, но как только я добавляю 100VW, она перестает работать, пожалуйста, помогите!

тело {

margin: 0;
padding: 0;
width: 100vw;
text-align: center;

}

#wrap {  
    width: 1535;
    height: 900;
    padding: 0;
    overflow: hidden;

}

#frame {
    width: 1535;
    height: 900;
    overflow: hidden;
    -webkit-transform: scale(calc(100vw/1535));
    -webkit-transform-origin: 0 0;

}


person Kyriakos1986    schedule 02.04.2018    source источник


Ответы (1)


Здесь две вещи.

  1. Ваши #wrap и #frame должны иметь какую-то единицу ширины. Так что это ваш шанс изменить размеры относительно области просмотра. Например, если вы хотите, чтобы они были шириной 1535 пикселей при ширине области просмотра 1920 пикселей, но при этом вы хотите, чтобы они сохраняли это соотношение при уменьшении области просмотра, установите для них ширину 79.947917vw. (1535/1920 = 0,79947917). Вы можете сделать что-то подобное и с высотами.

  2. Для масштабного преобразования не нужны единицы измерения. Масштабы принимают безразмерное число, кратное исходному размеру элемента. Таким образом, scale(2) в два раза больше обычного, или scale(0.5) в два раза больше обычного. Вы также можете использовать два числа, чтобы настроить ширину и высоту элемента по-разному. Например, scale(2, 3) заставит элемент увеличиться в два раза по сравнению с исходной шириной и в три раза по сравнению с исходной высотой.

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

person cjl750    schedule 02.04.2018