HTML CSS

RESPONSIVE SQUARES & RECTANGLES

(quick & simple examples)

#recA {   background: red;   width: 40vw; height: 15vh; }

<div id="recA"></div> <div id="squareA"></div>

RELATIVE UNITS

01

#squareA {   background: blue;   width: 15vw; height: 15vw; }

#recB { background: red; width: 100%; } #recB::before {   content: ""; display: block;   padding-top: 25%; }

<div id="recB"></div> <div id="squareB"></div>

ASPECT RATIO TRICK

02

#squareB { background: blue; width: 30%; } #squareB::before {   content: ""; display: block;   padding-top: 100%; }