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

Popular posts from this blog

java - nested exception is org.hibernate.exception.SQLGrammarException: could not extract ResultSet Hibernate+SpringMVC -

sql - Postgresql tables exists, but getting "relation does not exist" when querying -

asp.net mvc - breakpoint on javascript in CSHTML? -