[Vuejs]-Responsive gallery Vue.js

by

0👍

As i understand, you want to make responsive square divs, right?

A simple approach would be sizing the div with a viewport width (vw) value. You can see it in use on the values of hight and width of the .cat div bellow.

.wrapper{
  display:flex;
}

.cat {
  height: 25vw;
  width: 25vw;
  background-image: url("https://media.wired.com/photos/5cdefc28b2569892c06b2ae4/master/w_2560%2Cc_limit/Culture-Grumpy-Cat-487386121-2.jpg");
  background-size: cover;
  background-position: center;
}
<div class="wrapper"> 
  <div class="cat"></div>
  <div class="cat"></div>
  <div class="cat"></div>
  <div class="cat"></div>
</div>

There are other methods around, but i think this one is pretty straightforward. You may find useful info here: How to style a div to be a responsive square?

Leave a comment