Keep the height of a div block proportional to its width

Asked

Viewed 1,551 times

4

Hello, I have a block div in the form of a vertical column of indeterminate width and height, as they depend on the amount of content and the device, and I want inside it to have another block div at the top that has width: 100%; but the height ( height ) must be 53% relative to the width ( width ) of that block.

With an image instead of a div block I can do using max-width: 100%;, but of course I need a block div.

Better understand : http://jsfiddle.net/Lbk11L71/1/ .

I can’t use javascript!

html5 css3
  • 1

    And what goes inside that div? Give more information because if you don’t need anything inside (i.e., visual only) you can use padding: fiddle

  • 1

    inside it I want three proportional blocks, one large floating on the left and two small floating on the right

  • The size in percent of the objects is relative to the context where they are, in this case I believe you will need to place another div with 100% height and the one within it with relative height.

  • I don’t quite understand, you can make an example on http://jsfiddle.net/ please ?!

  • have tried using a max-width or max-height.

  • yes :-( I already tried

  • See if my answer solved your problem.

Show 2 more comments

3 answers

2


The solution seems to be really use padding-top, as suggested in the @Renan comment and the @Jeffersonalison response. The CSS padding is proportional to the container width. 

#a {
    width: 35%;
    height: 300px;
    background-color: #c64800;
    float: left;
}
#b {
    padding-top: 53%;
    background-color: blue;
}

http://jsfiddle.net/92aau9wg/

Like the width of #b is the same as #a, the height of #b will be 53% of its width. And to be able to place any content within #b, you can use an intermediary div:

#a {
    width: 35%;
    height: 300px;
    background-color: #c64800;
    float: left;
}
#intermediario {
    position: relative;
    padding-top: 53%;
    background-color: rgba(255, 255, 255, 0.8);
}
#b {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 255, 0.5);
}

http://jsfiddle.net/nr7wjrg9/

1

I didn’t get it right, but it’s something like that?

#a {
    width: 35%;
    height: 300px;
    background-color: #c64800;
    float: left;
    padding: 0 40px 40px 0;
}
#b {
    max-width: 100px;
    padding: 53%;
    display: block;
    background: url("https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQm3jEIkfGsmihCgf2iAOXD6HktQH4XMaq7m4Ia6kedLieWgqG4Cw") no-repeat;
    background-size: contain;
    display: block;
}
<div id="a">
    <div id="b"></div>
</div>
Observe que consego fazer com uma imagem mas quero esse resultado com uma div.<br/><br/>
O bloco "b" deve sempre manter altura proporcional a sua largura.<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> <- altere a largura da pagina

0

div {
  background:red;
  margin:auto;
  text-align:center;
  height: 150px;    

}
#test{
  width: 20%;
}
#test:before{
  content:'';
  padding:50% 0;
  display:inline-block;
  vertical-align:middle;
}
span {
  display:inline-block;
}
.test{
  width: 20%;
  overflow:hidden;
  background:yellow;
}
.test:before{
  content:'';
  padding-top:100%;/* valor vertical como 100% igual a largura */ 
  float:left;;
}
<div id="test">
  <span> Oi, eu sou o Goku</span>
</div>
<div class="test">
  <span> Oi, eu sou o Goku</span>
</div>

Browser other questions tagged html5 css3

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