Div block of size proportional to itself

Asked

Viewed 353 times

1

I need a div block that’s always proportional to itself, like width: 100px; e height: 60px; if width is 200px, height will be 120px, regardless of the size of the screen, and it should have width: 100%;

Preferably only with CSS, but if you need jQuery neh :\ div proporcinal

This image illustrates how the block should be in windows of different sizes and are not multiple blocks!

jquery html5 css3
  • 2

    Please don’t delete your question and answer, and edit it to solve potential problems (if any). Even because I was writing a suggestion, when the question disappeared and I could not post...

  • 1

    Who defines the width? Is it fixed, or changes via JS, etc? There’s nothing I know in CSS to adjust one property to another, what you can do is have an external div with one width assigned (e.g. in pixels) and an internal div with width: 100%; height: 60%, this should keep the internal proportional even if you touch the width of the external (note: I have not tested to be sure).

  • If I answered by pasting here, this would be copy. I’m leaving the link of a topic very similar to this one of yours, here from Stack. Take a look at the answer from <b>Luiz Vieira</b> and see if it helps you. https://answall.com/questions/3485/howto augment ou-decrease proportionaldiv-a-720x540 The <b>Guilherme Bernal</b> response in the above topic may also help you, but cause more problems.

  • Complementing what @mgibsonbr said, there seems to be a consensus among those starting on the site that a closed question is definitive. One should regard a closed question as suspended until it is improved. It is a tool of the site that is used for this purpose, just stay quiet, listen to the suggestions and edit the question. ;)

2 answers

1

friend, you can use a Rick, using proportional font sizes.

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;
}

The measure em is relative to the font size, so if the font-size is 200px, 1em will be 200px (1 * 200) and 0.5em will be 100px (0.5 * 200).

In any case it will be necessary to reset the size of the Font inside the DIV, so I have an internal div with font-size: medium, which by the way is the default value of this property.

0

Can you do with percentage using the padding.

.content {
    width: 100%;
    height: 0;
    padding-bottom: 30%;
    background-color: #000;
}
<div class="content"></div>

Click on EXECUTE, then in Whole page and will resize the screen to see the result.

Browser other questions tagged jquery html5 css3

You are not signed in. Login or sign up in order to post.