Векторный город с помощью элементов

307

02 марта 2017, 22:40

Сделал векторную картинку с помощью элементов html. Но почему то, когда я меняю высоту окна, она странно реагирует и всё сжимается, хотя должно оставаться таким же.

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>

Answer 1

Проблема в том, что вы размеры высоты считаете от размера высоты страницы, а ширину от ширины. Что бы изображение сохраняло целостность, нужно везде указывать от высоты страницы или от ширины:

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>