HTML CSS
(quick & simple examples)
#recA { background: red; width: 40vw; height: 15vh; }
<div id="recA"></div> <div id="squareA"></div>
#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>
#squareB { background: blue; width: 30%; } #squareB::before { content: ""; display: block; padding-top: 100%; }