使用CSS变换或javascript来缩放元素以动态地适应其父级

Question

I have a page in which I have a wheel of <div> elements, the entire wheel rotates when you click a button.

I achieve this effect by using CSS transforms, which are absolute in nature. However the wheel is very big, it looks nice on my HD display, but smaller screens get the edges cut off. I can not use % widths like I could with a normal layout, what I need is to scale the entire page down in the same way most browsers zoom functions work.

For myself I know that ctr+mouseWheel will zoom out the page so I can see the entire page, however I can not expect others to do this.

I know I can use -browser-transform: scale(amt); on a wrapper div to get the effect I want, however I can not figure out a way to do it dynamically. If I set the scale to .5 it will be .5, no matter the screen. I want the edges of the wheel to just be a few pixels from the edges of the screen on ANY screen. I know that media queries could be used to help the problem, but they would either leave me with results that are less than ideal, or require too many different queries. There must be a way to modify -browser-transform: scale(amt); programmatically, or some other way to have finite control.

Any thoughts?

Answer 1

Have you tried using media queries in css to target different screens. for example, have a media query in your css file that states that at a width of 320 - 480 pixels, the div containing this wheel is scaled to 50%. Then at 481-768 pixels, the div container is scaled to 75%. and from 769 pixels up, the div is scaled to 100%.

That should help you accomplish the dynamic scaling you want at different screen sizes. If you would like a demo, I'll be glad to make a jsfiddle showing it.