Made a vector image using html elements. But for some reason, when I change the height of the window, it reacts strangely and everything shrinks, although it should remain the same.

body {background-color: rgba(51, 170, 255, 1)} .ground { position: absolute; left: 0; bottom: 0; width: 100vw; height: 10vh; background-color: #eee; } .home { display: flex; flex-wrap: wrap; position: absolute; bottom: 10vh; background-color: #e0e0e0; padding: 1vw; width: 10vw; height: 14vh; } .home-0 {left: 7vw;} .home-1 {left: 22vw;} .home-2 {left: 39vw;} .home-3 {left: 55vw;} .home-4 {left: 71vw;} .home-window { background-color: white; width: 3vw; height: 3vh; margin: 1vw; } 
 <div class="home home-0"> <div class="home-window"></div> <div class="home-window"></div> <div class="home-window"></div> <div class="home-window"></div> <div class="home-window"></div> <div class="home-window"></div> </div> <div class="home home-1"> <div class="home-window"></div> <div class="home-window"></div> <div class="home-window"></div> <div class="home-window"></div> <div class="home-window"></div> <div class="home-window"></div> </div> <div class="home home-2"> <div class="home-window"></div> <div class="home-window"></div> <div class="home-window"></div> <div class="home-window"></div> <div class="home-window"></div> <div class="home-window"></div> </div> <div class="home home-3"> <div class="home-window"></div> <div class="home-window"></div> <div class="home-window"></div> <div class="home-window"></div> <div class="home-window"></div> <div class="home-window"></div> </div> <div class="home home-4"> <div class="home-window"></div> <div class="home-window"></div> <div class="home-window"></div> <div class="home-window"></div> <div class="home-window"></div> <div class="home-window"></div> </div> <div class="ground"></div>

    1 answer 1

    The problem is that you consider the dimensions of the height of the size of the page height, and the width of the width. In order for the image to preserve integrity, you need to specify everywhere from the height of the page or from the width:

     body {background-color: rgba(51, 170, 255, 1)} .ground { position: absolute; left: 0; bottom: 0; width: 100vw; height: 10vw; background-color: #eee; } .home { display: flex; flex-wrap: wrap; position: absolute; bottom: 10vw; background-color: #e0e0e0; padding: 1vw; width: 10vw; height: 14vw; } .home-0 {left: 7vw;} .home-1 {left: 22vw;} .home-2 {left: 39vw;} .home-3 {left: 55vw;} .home-4 {left: 71vw;} .home-window { background-color: white; width: 3vw; height: 3vw; margin: 1vw; } 
     <div class="home home-0"> <div class="home-window"></div> <div class="home-window"></div> <div class="home-window"></div> <div class="home-window"></div> <div class="home-window"></div> <div class="home-window"></div> </div> <div class="home home-1"> <div class="home-window"></div> <div class="home-window"></div> <div class="home-window"></div> <div class="home-window"></div> <div class="home-window"></div> <div class="home-window"></div> </div> <div class="home home-2"> <div class="home-window"></div> <div class="home-window"></div> <div class="home-window"></div> <div class="home-window"></div> <div class="home-window"></div> <div class="home-window"></div> </div> <div class="home home-3"> <div class="home-window"></div> <div class="home-window"></div> <div class="home-window"></div> <div class="home-window"></div> <div class="home-window"></div> <div class="home-window"></div> </div> <div class="home home-4"> <div class="home-window"></div> <div class="home-window"></div> <div class="home-window"></div> <div class="home-window"></div> <div class="home-window"></div> <div class="home-window"></div> </div> <div class="ground"></div>

    • Oh, not doper immediately. Thanks :) - user238931
    • @AnatShir, if my answer helped you, mark it as correct. - Yuri
    • And how to note: - user238931
    • @AnatShir, there is a check mark next to the answer :) - Yuri
    • After seven minutes can only be noted. Tell me, how to make the sun, which would still spin? - user238931