div as a vertical column of indeterminate width and height, as they depend on the amount of content and the device, and I want it to have another block div on the top that has width: 100%; but the height should be 53% in relation to the 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 div block.
Understand better: link .
I can not use javascript!
The solution seems to even use padding-top , as suggested in @renan's comment and @JeffersonAlison's response. The CSS padding is proportional to the width of the container .
#a {
width: 35%;
height: 300px;
background-color: #c64800;
float: left;
}
#b {
padding-top: 53%;
background-color: blue;
}
Since the width of #b is the same as #a , the height of #b will be 53% of its width. And to be able to put any content inside #b , you can use an intermediate 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);
}
I did not get it right, but is it something like this?
#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
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>