Use CSS transforms or javascript to scale an element so that it dynamically matches its parent element

Question

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

I achieve this effect using CSS transforms that are absolute in nature. However, the wheel is very large, it looks good on my HD display, but smaller screens crop the edges. I cannot use the width% as I could, with the usual layout, I need to scale the entire page down in the same way as most browser zoom features.

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

I know that I can use -browser-transform: scale(amt); on the div wrapper to get the effect I want, however I cannot find a way to do this dynamically. If I set the scale to .5, it will be .5, regardless of the screen. I want the edges of the wheel to be just a few pixels from the edges of the screen on ANY screen. I know that media queries can be used to solve the problem, but they will either leave me with results that are less ideal or require too many different queries. There must be a way to modify the program code -browser-transform: scale(amt); or some other way to have ultimate control.

Any thoughts?

Answer 1

Have you tried using media queries in css for different screens. for example, there is a media query in your css file, which indicates 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 with 769 pixels up, the div is scaled to 100%.

This will help you perform the dynamic scaling you want with different screen sizes. If you need a demo, I will be happy to make it jsfiddle.