css - Making a square div with inheritance or sth? (no js) -
is there way read width , set height same value ? know trick viewportheight[vh] , [vm], won't work here.
you can utilizing fact in padding-bottom: 100%
percentage percentage of width, , not height. setting pseudo-element padding-bottom: 100%
change height according width. content can in absolutely position layer.
(i've added little hover animation demonstrate changing width changes height)
.container { position: relative; width: 100px; } .container:hover { width: 150px; transition: width 2s; } .container::before { display: block; padding-bottom: 100%; content: ''; } .content { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: red; }
<div class="container"> <div class="content"> </div> </div>
Comments
Post a Comment