Vue.js Dynamic Gallery

Greetings to everyone attending, I'm currently working on a portfolio page and I am looking to resize blocks dynamically in vue.js based on window size.View image description here

The tile displayed in the image should always maintain a square shape, so upon resizing it can either decrease in size (up to a certain point) or the number of tiles per row could adjust accordingly. I'm struggling to implement this feature

Below is the complete layout that I have created, although it may require some modifications. Just to clarify, my expertise lies mainly in web design, so please bear in mind that the layout and code might not be flawless.

@media (max-width: 500px) {...}
... ...
javascripthtmlcssvue.js

Answer №1

It seems like you're looking to create responsive square divs, is that right?

One simple way to achieve this is by using the viewport width (vw) value to size the div. This can be seen in the height and width values of the .cat div below.

.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>

While there are other methods available, this approach is quite straightforward. You may also find helpful insights here: How to style a div to be a responsive square?

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Modifying footer flex position with translatedY child elements for a dynamic website layout

My goal is to create a sticky footer with specific requirements: The footer should have position:fixed; Its height should adjust based on: The number of child .sub-menu items added by the user (which can vary) The changes in font-siz ...

htmlcssflexboxparent-childviewport-units

Tips for incorporating user-entered data from a text box into a JavaScript function and utilizing a loop

Although my code is functioning correctly, I am looking to make some adjustments but seem to be struggling to achieve the desired outcome. Essentially, I have two labels and an input field in which the user is prompted to enter a specific number of weeks ...

javascripthtml

Is there a way to mimic disabled input fields?

Is there a way to simulate input being disabled without actually changing the value in the input field, but still have that value sent with POST using a form? <input class="dis" type="text" disabled="disabled" value="111"> <input class="no" type= ...

javascriptjqueryhtmlcss

Guide to using two UI grids simultaneously with the directives ng-hide and ng-grid

As a newcomer to AngularJS, I am attempting to create a page with two ui-grid elements and a button labeled "other-grid". The goal is for the first grid to load initially, and when clicked again, it should be replaced by the second grid. However, I am en ...

htmlangularjsng-showng-hideui-grid

JavaScript: How to identify and select a specific item from a context menu

Currently diving into the world of JavaScript, so please keep that in mind when explaining. My main goal is to figure out a way to detect when a user triggers a right-click or uses the context menu from the keyboard. Specifically, I want to know if they s ...

javascriptdom-events

I am looking to enhance the dimensions of my shapes by utilizing the ExtrudeGeometry feature in Three.js. Can anyone provide guidance on

I am currently utilizing three.js to create a line in my project. However, I am facing an issue where the line appears flat like a paper, instead of a three-dimensional wall. I am struggling to increase the height of the line in my code. Below is the code ...

javascriptthree.jsheightgeometryshapes

JQuery is unable to detect the response from PHP's echo statement

Receiving an 'ok' message from a PHP script through a JQuery ajax call has become quite the challenge for me. I am able to successfully display the correct message in the console when I log it, but for some reason, the corresponding jQuery funct ...

phpjavascriptjqueryajaxecho

Examining the order in which tabs are navigated

Ensuring correct tab keyboard navigation order within a form is crucial for one of our tests. Query: How can the tab navigation order be verified using protractor? Our current method involves repeating the following steps for each input field in a form ( ...

javascripttestingseleniumprotractorend-to-end

Are there any APIs available for accessing call logs from another app using Android?

Currently, I am in the process of developing an Android Child Monitoring application. My goal is to access the call logs from one app and transfer them to another app. Are there any relevant APIs that can assist with this task? Alternatively, do you have ...

phpandroidhtml

What is the trick to displaying Bootstrap 5 dropdown arrows when the button label is lengthy?

Within a fixed-width element, I have a Bootstrap dropdown which causes the arrow to disappear when the button text is too long. Is there a way to trim the text while still displaying the arrow, similar to this image: https://i.sstatic.net/jHp5R.png .ou ...

javascripthtmlcssbootstrap-4bootstrap-5

Is it possible to switch variations in WP-Commerce from drop-down menus to text input

Currently exploring ways to customize the size variations on an e-commerce website similar to Using WP Commerce, the size variations are originally displayed in select fields by default. <select class="wpsc_select_variation ...

phphtmlwordpresse-commerce

Is it possible for invoking a web service recursively in JavaScript to lead to a stack overflow issue

I am currently working on a migration procedure that may last between 2 to 3 days to complete. My concern is that the implementation I have in place could potentially result in a StackOverflow exception due to its recursive nature. I am questioning wheth ...

javascriptajaxweb-servicesrecursionasp.net-web-api

Trying to align two divs side by side with the first one floating left and the second one fixed in position? Unfortunately

Here is an example that I have: https://jsfiddle.net/2z2ksLy4/ HTML: <div class="one"> test </div> <div class="two"> test2 </div> CSS: .one{ width:400px; border:1px solid red; min-height: 200px; float:left; display: ...

htmlcss

Get an Object Array and assign it to a state Array variable after filtering

Here is a JSON Input that I will be filtering by orderId and then setting to a state variable. [{"orderId":3,"userId":3,"firstName":"Amal","lastName":"kankanige","contactNo":"011-3456787","status":"pending","deliveryAddress":"No:24/c,Anders Road,Wijerama, ...

javascriptreactjs

Colorful background visuals without any text

Can you achieve a background color effect using Stylus without any text? span { width: 5px; height: 5px; } span.red { background-color: #f00; } <span class="red"></span> ...

htmlcss

Leverage async and await features in TypeScript aiming at ES5 compatibility

Currently working on a TypeScript project that is set to target ES5, I am exploring the feasibility of incorporating async/await functionality. Syntactically, the TypeScript compiler is able to transpile the code without issues. However, it has come to my ...

javascripttypescriptasync-awaitecmascript-5

Safari encounters issues with Flexbox child elements that exceed their assigned height dimensions

Encountering a peculiar Flexbox height dilemma specific to Safari. Interestingly, in Chrome, the center div perfectly fills the 100% height of the body div. Contrastingly, on Safari, the center div extends beyond the 100% height of its container; seeming ...

htmlcsssafariflexbox

Having several bootstrap modals on a single webpage

Bootstrap Modals are featured on my landing page. I have numerous bootstrap buttons with various data targets and modals. The content within the modal needs to be displayed based on the button's data target, linked to the modal via its ID. How can I ...

javascripthtmljquerybootstrap-4

Is there a way to perfectly center text both vertically and horizontally to the right side of an image?

I'm working on developing a mobile website using jQuery Mobile and I want to include images in my "collapsible" elements. Here is the code I am using: <div data-role="collapsible" data-collapsed="true"> <h3><img src="image ...

htmlcssjquery-mobile

Navigating on Blogger can be a tricky task when it comes to searching and

I recently added a Table to my blogger post, along with an input form for readers to easily search data. After finding the code on W3Schools (link here), I implemented it successfully. However, I am looking to make some improvements. Here is my question: ...

javascripthtmlcssblogger