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

У меня есть страница, в которой у меня есть колесо

элементов, все колесо вращается при нажатии кнопки.

Я добиваюсь этого эффекта с помощью преобразований CSS, которые по своей природе абсолютны. Однако колесо очень большое, оно хорошо выглядит на моем HD-дисплее, но на экранах меньшего размера края обрезаются. Я не могу использовать % ширины, как я мог бы с обычным макетом, мне нужно уменьшить масштаб всей страницы так же, как работают функции масштабирования большинства браузеров.

Для себя я знаю, что ctr+mouseWheel уменьшит масштаб страницы, чтобы я мог видеть всю страницу, однако я не могу ожидать, что другие сделают это.

Я знаю, что могу использовать -browser-transform: scale(amt);в обертке div, чтобы получить нужный эффект, однако я не могу найти способ сделать это динамически. Если я установлю масштаб на 0,5, он будет 0,5, независимо от экрана. Я хочу, чтобы края колеса находились всего в нескольких пикселях от краев экрана на ЛЮБОМ экране. Я знаю, что медиа-запросы могут помочь решить проблему, но они либо оставят меня с далеко не идеальными результатами, либо потребуют слишком много разных запросов.Должен быть способ изменить -browser-transform: scale(amt);программно или какой-либо другой способ иметь ограниченный контроль.

Есть мысли?

6
задан zeel 11 October 2012 в 12:36
поделиться