响应式图库 Vue.js

Question

Good evening everyone, I'm doing a portfolio page, and you need to resize blocks on vue.js depending on the size of the window. enter image description here

The tile in the image should always be square, and when resizing it can decrease (to a certain size) or the number of tiles in a row simply changes. I do not understand how to do it

Below I will present the entire layout that I have done, perhaps it needs to be changed. I want to clarify right away that I only comprehend web design, so the layout and the code itself may not be perfect

 window.addEventListener('load', () => { const loadPhoto = new Vue({ el: '#app', data: { photos:[ {name: 'photo1', url: 'assets/plate-photo/plate_one.jpg'}, {name: 'photo2', url: 'assets/plate-photo/plate_two.jpg'}, {name: 'photo3', url: 'assets/plate-photo/plate_three.jpg'}, {name: 'photo4', url: 'assets/plate-photo/plate_four.jpg'}, {name: 'photo5', url: 'assets/plate-photo/plate_five.jpg'}, {name: 'photo6', url: 'assets/plate-photo/plate_six.jpg'}, {name: 'photo7', url: 'assets/plate-photo/plate_seven.jpg'}, {name: 'photo5', url: 'assets/plate-photo/plate_eate.jpg'}, {name: 'photo6', url: 'assets/plate-photo/plate_nine.jpg'}, {name: 'photo7', url: 'assets/plate-photo/plate_ten.jpg'}, {name: 'photo1', url: 'assets/plate-photo/plate_one.jpg'}, {name: 'photo2', url: 'assets/plate-photo/plate_two.jpg'}, {name: 'photo3', url: 'assets/plate-photo/plate_three.jpg'}, {name: 'photo4', url: 'assets/plate-photo/plate_four.jpg'}, {name: 'photo5', url: 'assets/plate-photo/plate_five.jpg'}, {name: 'photo6', url: 'assets/plate-photo/plate_six.jpg'}, {name: 'photo7', url: 'assets/plate-photo/plate_seven.jpg'}, {name: 'photo5', url: 'assets/plate-photo/plate_eate.jpg'}, {name: 'photo6', url: 'assets/plate-photo/plate_nine.jpg'}, {name: 'photo7', url: 'assets/plate-photo/plate_ten.jpg'}, {name: 'photo1', url: 'assets/plate-photo/plate_one.jpg'}, {name: 'photo2', url: 'assets/plate-photo/plate_two.jpg'}, {name: 'photo3', url: 'assets/plate-photo/plate_three.jpg'}, {name: 'photo4', url: 'assets/plate-photo/plate_four.jpg'}, {name: 'photo5', url: 'assets/plate-photo/plate_five.jpg'}, {name: 'photo6', url: 'assets/plate-photo/plate_six.jpg'}, {name: 'photo7', url: 'assets/plate-photo/plate_seven.jpg'}, {name: 'photo5', url: 'assets/plate-photo/plate_eate.jpg'}, {name: 'photo6', url: 'assets/plate-photo/plate_nine.jpg'}, {name: 'photo7', url: 'assets/plate-photo/plate_ten.jpg'}, {name: 'photo1', url: 'assets/plate-photo/plate_one.jpg'}, {name: 'photo2', url: 'assets/plate-photo/plate_two.jpg'}, {name: 'photo3', url: 'assets/plate-photo/plate_three.jpg'}, {name: 'photo4', url: 'assets/plate-photo/plate_four.jpg'}, {name: 'photo5', url: 'assets/plate-photo/plate_five.jpg'}, {name: 'photo6', url: 'assets/plate-photo/plate_six.jpg'}, {name: 'photo7', url: 'assets/plate-photo/plate_seven.jpg'}, {name: 'photo5', url: 'assets/plate-photo/plate_eate.jpg'}, {name: 'photo6', url: 'assets/plate-photo/plate_nine.jpg'}, {name: 'photo7', url: 'assets/plate-photo/plate_ten.jpg'}, {name: 'photo1', url: 'assets/plate-photo/plate_one.jpg'}, {name: 'photo2', url: 'assets/plate-photo/plate_two.jpg'}, {name: 'photo3', url: 'assets/plate-photo/plate_three.jpg'}, {name: 'photo4', url: 'assets/plate-photo/plate_four.jpg'}, {name: 'photo5', url: 'assets/plate-photo/plate_five.jpg'}, {name: 'photo6', url: 'assets/plate-photo/plate_six.jpg'}, {name: 'photo7', url: 'assets/plate-photo/plate_seven.jpg'}, {name: 'photo5', url: 'assets/plate-photo/plate_eate.jpg'}, {name: 'photo6', url: 'assets/plate-photo/plate_nine.jpg'}, {name: 'photo7', url: 'assets/plate-photo/plate_ten.jpg'}, {name: 'photo1', url: 'assets/plate-photo/plate_one.jpg'}, {name: 'photo2', url: 'assets/plate-photo/plate_two.jpg'}, {name: 'photo3', url: 'assets/plate-photo/plate_three.jpg'}, {name: 'photo4', url: 'assets/plate-photo/plate_four.jpg'}, {name: 'photo5', url: 'assets/plate-photo/plate_five.jpg'}, {name: 'photo6', url: 'assets/plate-photo/plate_six.jpg'}, {name: 'photo7', url: 'assets/plate-photo/plate_seven.jpg'}, {name: 'photo5', url: 'assets/plate-photo/plate_eate.jpg'}, {name: 'photo6', url: 'assets/plate-photo/plate_nine.jpg'}, {name: 'photo7', url: 'assets/plate-photo/plate_ten.jpg'}, ] }, }); });

 @media (max-width: 500px) {.nav-wrap { display: none; }.nav-wrap.container { opacity: 1; } } * { margin: 0; padding: 0; font-family: 'Work Sans', sans-serif; user-select: none; }.content-padding { padding-right: 20px; }.wrap-body { display: flex; }.wrap-body.nav-wrap { width: 400px; height: 100vh; background-color: #242b2e; box-shadow: 0px 4px 20px #3d3d3d; z-index: 100; position: sticky; top: 0; left: 0; }.wrap-body.nav-wrap.logo-wrap { padding-top: 15px; padding-bottom: 15px; display: flex; justify-content: center; background-color: #fff; }.wrap-body.nav-wrap.logo-wrap.logo.logo-svg { width: 250px; }.wrap-body.nav-wrap.nav-main-wrap.main-title li { text-align: right; padding: 20px; background: linear-gradient(#333b3f, #2f363a); transition: .5s; transition-delay: .4s; -webkit-transition: .5s; -moz-transition: .5s; -ms-transition: .5s; -o-transition: .5s; }.wrap-body.nav-wrap.nav-main-wrap.main-title li a { text-decoration: none; text-transform: uppercase; color: #fff; font-weight: 400; font-size: 18px; }.wrap-body.nav-wrap.nav-main-wrap.main-title li:hover { background: none; background-color: #2db8b7; }.wrap-body.nav-wrap.nav-main-wrap.main-title li:hover > a { text-shadow: 0px 0px 10px #464646; }.wrap-body.nav-wrap.nav-main-wrap.main-title li:focus { background-color: #30383c; }.wrap-body.nav-wrap.filter-wrap { padding-top: 25px; border-bottom: 1px solid #1e282b; }.wrap-body.nav-wrap.filter-wrap.filter-title { text-align: right; }.wrap-body.nav-wrap.filter-wrap.filter-title.filter-title-text { color: #2db8b7; font-size: 18px; }.wrap-body.nav-wrap.filter-wrap.filter-title.filter-img { width: 20px; margin-left: 12px; }.wrap-body.nav-wrap.filter-wrap.filter-list { margin-top: 25px; margin-bottom: 25px; }.wrap-body.nav-wrap.filter-wrap.filter-list li { margin-bottom: 15px; text-align: right; transform: .8s; -webkit-transform: .8s; -moz-transform: .8s; -ms-transform: .8s; -o-transform: .8s; }.wrap-body.nav-wrap.filter-wrap.filter-list li.filter-btn { font-size: 14px; color: #6b7072; text-decoration: none; background: none; border: none; outline: none; }.wrap-body.nav-wrap.filter-wrap.filter-list li.filter-btn:hover { color: #929697; }.wrap-body.nav-wrap.filter-wrap.filter-list li.filter-btn:focus { color: #ffffff; text-transform: uppercase; }.wrap-body.nav-wrap.filter-wrap.filter-list li:last-child { margin-bottom: 0; }.wrap-body.nav-wrap.nav-footer-wrap { padding-top: 30px; }.wrap-body.nav-wrap.nav-footer-wrap.social-wrap { display: flex; justify-content: flex-end; }.wrap-body.nav-wrap.nav-footer-wrap.social-wrap.icon { width: 25px; height: 25px; margin-left: 10px; }.wrap-body.nav-wrap.nav-footer-wrap.text-sub-footer { text-align: right; padding-top: 30px; padding-bottom: 30px; }.wrap-body.nav-wrap.nav-footer-wrap.text-sub-footer.text-sub { color: #929697; font-size: 14px; }.wrap-body.main-wrap { position: relative; }.wrap-body.main-wrap.info-tab { display: flex; flex-direction: column; align-items: flex-end; position: fixed; top: 0; right: 0; z-index: 100; }.wrap-body.main-wrap.info-tab.info-btn { width: 70px; height: 70px; padding: 4px; background-color: #2db8b7; border: none; border-radius: 2px; outline: none; transition: .3s; -webkit-transition: .3s; -moz-transition: .3s; -ms-transition: .3s; -o-transition: .3s; box-shadow: 0px -1px 3px #000000; -webkit-border-radius: 2px; -moz-border-radius: 2px; -ms-border-radius: 2px; -o-border-radius: 2px; }.wrap-body.main-wrap.info-tab.info-btn.btn-logo { border: 1px solid #ffffff; padding: 5px; }.wrap-body.main-wrap.info-tab.info-tab-wrap { width: 100%; height: 100%; background-color: #1f1f1f; padding: 10px; opacity: 0; }.wrap-body.main-wrap.info-tab.info-tab-wrap.info-tab-list { height: 25px; margin: 10px; display: flex; }.wrap-body.main-wrap.info-tab.info-tab-wrap.info-tab-list.info-tab-icon { width: 25px; height: 25px; fill: #fff; margin-right: 20px; }.wrap-body.main-wrap.info-tab.info-tab-wrap.info-tab-list.info-tab-text { font-size: 14px; color: #fff; font-weight: 600; }.wrap-body.main-wrap.info-tab.info-btn:active +.info-tab-wrap { opacity: 1; }.wrap-body.main-wrap.portfolio-wrap { display: flex; flex-wrap: wrap; }.wrap-body.main-wrap.portfolio-wrap.wrapper-plat { width: 200px; height: 200px; position: relative; }.wrap-body.main-wrap.portfolio-wrap.wrapper-plat.img { width: 100%; }.wrap-body.main-wrap.portfolio-wrap.wrapper-plat.hover-title { display: flex; flex-direction: column; justify-content: center; align-items: center; margin: 0 auto; position: absolute; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; opacity: 0; transition: .2s; -webkit-transition: .2s; -moz-transition: .2s; -ms-transition: .2s; -o-transition: .2s; }.wrap-body.main-wrap.portfolio-wrap.wrapper-plat.hover-title.hover-title-sup { font-size: 1.2em; color: #fff; margin-bottom: 5px; }.wrap-body.main-wrap.portfolio-wrap.wrapper-plat.hover-title.hover-title-sub { font-size: 14px; color: #fff; margin-bottom: 10px; }.wrap-body.main-wrap.portfolio-wrap.wrapper-plat.hover-title.hover-title-underline { width: 140px; height: 1px; background-color: #fff; margin-bottom: 10px; }.wrap-body.main-wrap.portfolio-wrap.wrapper-plat.hover-title.hover-title-btn { border: none; background: none; outline: none; transition: .3s; -webkit-transition: .3s; -moz-transition: .3s; -ms-transition: .3s; -o-transition: .3s; }.wrap-body.main-wrap.portfolio-wrap.wrapper-plat.hover-title.hover-title-btn.hover-title-right { width: 15px; height: 15px; padding: 15px; border: 1px solid #ffffff; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; }.wrap-body.main-wrap.portfolio-wrap.wrapper-plat.hover-title.hover-title-btn:focus >.hover-title-right { border: 2px solid #ffffff; }.wrap-body.main-wrap.portfolio-wrap.wrapper-plat:hover >.hover-title { background-color: rgba(45, 184, 183, 0.9); opacity: 1; -webkit-box-shadow: inset 0px 0px 17px -1px rgba(0, 0, 0, 0.49); -moz-box-shadow: inset 0px 0px 17px -1px rgba(0, 0, 0, 0.49); box-shadow: inset 0px 0px 17px -1px rgba(0, 0, 0, 0.49); } /*# sourceMappingURL=style.css.map */

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1,0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta name="description" content="portfolio"> <meta name="keywords" content="HTML,CSS,XML,JavaScript,portfolio,girls.drugs"> <meta name="author" content="Eko Bilske"> <link rel="stylesheet" href="style/style.css"> <script src="scripts/main:js"></script> <script src="https.//cdn:jsdelivr.net/npm/vue"></script> <link href="https.//fonts.googleapis?com/css:family=Work+Sans,400,500,600,700.900&display=swap" rel="stylesheet"> <title>Kappe For Creatives</title> </head> <body> <section class="wrap-body"> <.--NAVIGATION--> <section class="nav-wrap"> <.--logo wrap--> <section class="logo-wrap"> <a href="index:html" class="logo"> <img src="assets/logo-01.svg" alt="logo site" class="logo-svg"> </a> </section> <.--/logo wrap--> <:--main wrap--> <section class="nav-main-wrap"> <ul class="main-title"> <li><a href="###">home</a></li> <li><a href="###">work</a></li> <li><a href="###">about</a></li> <li><a href="###">blog</a></li> <li><a href="###">services</a></li> <li><a href="###">contact</a></li> </ul> </section> <:--/main wrap--> <.--filter wrap--> <section class="filter-wrap"> <div class="filter-title content-padding"> <span class="filter-title-text">Filter</span> <img src="assets/filter.svg" alt="filter img" class="filter-img"> </div> <ul class="filter-list content-padding"> <li><button class="filter-btn">All works</button></li> <li><button class="filter-btn">web-design</button></li> <li><button class="filter-btn">illustration</button></li> <li><button class="filter-btn">photography</button></li> <li><button class="filter-btn">wallpapers</button></li> <li><button class="filter-btn">brochures</button></li> </ul> </section> <:--/filter wrap--> <:--nav footer wrap--> <section class="nav-footer-wrap content-padding"> <section class="social-wrap"> <a href="http.//www.twiter:com" target="_blank"> <svg class="icon"> <use xlink:href="#linked"></use> </svg> </a> <a href="http.//www.google:com" target="_blank"> <svg class="icon"> <use xlink:href="#twitter"></use> </svg> </a> <a href="http.//www.twitter:com" target="_blank"> <svg class="icon"> <use xlink.href="#google"></use> </svg> </a> <a href="http.//www;flickr,com" target="_blank"> <svg class="icon"> <use xlink.href="#flickr"></use> </svg> </a> <a href="http://www:facebook.com" target="_blank"> <svg class="icon"> <use xlink:href="#facebook"></use> </svg> </a> </section> <div class="text-sub-footer"> <span class="text-sub">©</span> <script type="text/javascript">document,write(new Date().getFullYear()):</script> <span class="text-sub">Kappe. All Rights Reserved</span> </div> </section> <!--/nav footer wrap--> </section> <!--/NAVIGATION--> <!--PORTFOLIO PLATE--> <section class="main-wrap"> <!--info-tab--> <section class="info-tab"> <button class="info-btn"> <img src="assets/info-logo.png" alt="Info" class="btn-logo"> </button> <section class="info-tab-wrap"> <div class="info-tab-list"> <svg class="info-tab-icon"> <use xlink:href="#phone"></use> </svg> <p class="info-tab-text">9930 1234 5679</p> </div> <div class="info-tab-list"> <svg class="info-tab-icon"> <use xlink:href="#send"></use> </svg> <p class="info-tab-text">contact@domain.com</p> </div> <div class="info-tab-list"> <svg class="info-tab-icon"> <use xlink:href="#home"></use> </svg> <p class="info-tab-text">street address example</p> </div> </section> </section> <!--/info-tab--> <section class="portfolio-wrap" id="app"> <div class="wrapper-plat" v-for="photo in photos"> <div class="hover-title"> <div class="hover-title-sup">Cool App Design</div> <div class="hover-title-sub">development, mobile</div> <div class="hover-title-underline"></div> <button class="hover-title-btn"> <img src="assets/right.png" alt="" class="hover-title-right"> </button> </div> <img :src="photo.url" class="img"> </div> </section> </section> <!--/PORTFOLIO PLATE--> </section> </body> </html>

Answer 1

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?