I need a div block that has size always proportional to itself, such as width: 100px; e height: 60px; if width is 200px , height is 120px , regardless of screen size, and it should have width: 100%;
Preferably and if possible only with CSS, but if you need jQuery neh: \ proporcinal div http://www.mediafire.com/convkey/f6be/16281e31c4ohb1mzg.jpg
This image illustrates how the block should be in windows of different sizes and are not several blocks!
If I answered by pasting here, this would be a copy. I'm leaving the link for a topic very similar to this one here, from Stack. Take a look at Luiz Vieira answer and see if it helps.
How to increase or decrease div proportional to 720x540?
Guilherme Bernal answer also in the above topic can help you, but cause more problems.
Friend, you can use a trick, using sizes proportional to the font.
HTML
<div id="container">
<div class="font-normal">
Auto
</div>
</div>
CSS
#container {
font-size: 200px;
width: 1em;
height: 0.5em;
border: 1px solid black;
}
.font-normal {
font-size: medium;
}
em measure is relative to the font size, so if the font-size is 200px, 1em will be 200px (1 * 200) and 0.5em will 100px (0.5 * 200).
In any case, it will be necessary to reset the font size within DIV , so I have an internal div with font-size: medium , which by the way is the default value of this property.