Ways to dynamically adjust the size of a group of images in a limited space without any overflow, scrolling, or the use of media queries?

In my React app, I am receiving a variable number of square images from an API to display. These images come in dimensions of 200px, 512px, or 600px squares and have corresponding jackpot denominations and amounts underneath them with a title above. The display can show anywhere from 1 to 5 denominations and amounts, all of which must be the same size without resizing.

The app will be shown on a 1920H x 1080W screen in a business setting where scrolling and screen resizing are not possible, ruling out the use of media queries.

The image display will rotate every ten seconds to show new sets of images. A CodeSandbox link - https://codesandbox.io/s/jackpot-ufs5t - provides a basic replica of the app (without rotation or API calls) using simulated data in the imageList.js file acting as a fake API.

I want these images to fit within a container near the top of the screen below the title and above the jackpot denominations/amounts. If there are less than six images, they should be a specific height and width like 303px square. If there are more than 6 images, their height and width need to decrease proportionally while fitting within the container between the title and jackpot amounts.

While everything looks good with fewer images and denominations, having 14 images and 5 jackpot amounts is problematic.

Despite attempts with Flexbox and CSS-Grid, I still struggle with auto-fitting the images and preventing overlapping when there are many images present in the container.

In the provided CodeSandbox example, commenting/uncommenting data in the imageList file can change the number of images and jackpot amounts displayed.

To address this issue, I have been conditionally assigning different classes to the images and container based on various combinations of the image array length and jackpot array amount. Is there a better way using only Flexbox or CSS-Grid to automatically adjust the size of square images based on quantity?

Currently, my concern lies with the vertical display rather than horizontal orientation.

For reference, here is the CodeSandbox link again: https://codesandbox.io/s/jackpot-ufs5t

cssreactjsflexboxcss-grid

Answer №1

To create a responsive grid layout for logos, you can define a grid within your container-logos class and set the logos to occupy 100% of the width and height of the virtual space created by the CSS grid.

Here are the steps to achieve this:

  • Add 
    grid-template-rows: repeat(auto-fit, minmax(79px, 1fr));
    to the existing .container-logos class.
  • Delete the contents of your .logo class and add height: 100%; width: 100%;.

Below is an example demonstrating the implementation:

body{
    margin: 0;
    padding: 0;    
    box-sizing: border-box;
    height: 100vh;
    display: grid;
    place-items: center;
}

.container-logos{
  max-height: 50vh;
  max-width: 50vw;
  width:50vw;
  height:50vh;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(45px, 1fr));
  grid-template-rows: repeat(auto-fit, minmax(45px, 1fr));
  grid-gap: 10px;
}

.logo{
  width: 100%;
  height: 100%;
  background-color: red;
}
<div class="container-logos">

  <div class="logo"></div>
  <div class="logo"></div>
  <div class="logo"></div>
  <div class="logo"></div>
  <div class="logo"></div>
  <div class="logo"></div>
  <div class="logo"></div>
  <div class="logo"></div>
  <div class="logo"></div>
  <div class="logo"></div>
  <div class="logo"></div>
  <div class="logo"></div>
  <div class="logo"></div>
  <div class="logo"></div>

</div>

You can experiment with adding or removing logos in the above example to see how they adjust their sizes based on available space.

Additionally, here is a visual representation of the outcome after following these instructions:

https://i.sstatic.net/9jgUl.png

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

The maskSize animation from Framer Motion is not functioning properly on mobile devices

I have successfully implemented a SVG mask scroll feature in Framer Motion. You can test it out on the sandbox by visiting this link: https://codesandbox.io/p/sandbox/svg-nextjs-masking-vgnhnd. However, there seems to be an issue with its performance on mo ...

htmlcssreactjsnext.jsframer-motion

Techniques for ensuring input validity using JavaScript

One of my form inputs is required: <input type="text" id="input-id" required> After the user submits it, I send the value using ajax and then clear it with $("#input-id").val(""). However, after this action, the input appears invalid. I want to ...

javascripthtmlcssfrontendrequired

What are the best practices for integrating Qt with React in TSX?

While I've figured out how to communicate qt with JS successfully, the challenge arises when trying to use React in TSX for frontend development. The previous solution failed on this front. Backend code: #./main.py import os from PySide6.QtWidgets ...

reactjstypescriptqtpyqtpyside

Replace the term "controlled" with "unleashed" when utilizing the file type input

In my app, I have defined multiple states like this: const [state,setstate]=React.useState({headerpic:'',Headerfontfamily:'',Subheaderfontfamilty:''}) And to get an image from my device, I am using the following input: &l ...

javascriptreactjsreact-hookscontrolled-component

modify style when not valid and is touched

When I try to modify the style of an i tag based on the touched and invalid state of another field, only the input tag's style changes and not the i tag. Here's the CSS code I'm using: input.ng-touched.ng-invalid { border-color: red; } ...

htmlcssangularangular7

Ensure that both the div element and its contents are restricted to a maximum width of

I'm having trouble arranging the display of information next to a plant image. I want to ensure that the information stays on the right side of the image when the screen reaches a specific minimum width. The issue arises when the information includes ...

htmlcss

The error message "bind this is not defined in react" is displayed when attempting to read

Is it necessary to use bind in the constructor if you already have bind(this) in JSX? render(){ return( <input onChange={this.myFunc.bind(this)} type="text"/> ) } myFunc(){ alert('should trigger'); } I encountered an erro ...

javascriptreactjs

React component problem with pagination in Material UI's material-table

I have integrated the material-table into my project, but I am encountering an issue with the TablePagination. It is not functioning correctly and throwing errors in the console. I followed the installation instructions as provided in the documentation at ...

reactjsmaterial-uimaterial-table

Discover the power of the jQuery :closest() CSS selector in your

Looking for a CSS selector equivalent to the $.fn.closest() function, such as: $('.wrapper:eq(0)>h1>strong:closest(.wrapper)') The goal is to have the implementation return the .wrapper element that is the first on the page, containing an ...

javascriptjquerycssjquery-uijquery-ui-draggable

Alter the hue on the fly

How can I change the color of a div based on whether it is currently red or green? I attempted the following code, but it doesn't seem to be working as expected. if ($(this).css("background-color")=="rgb(34,187,69)"|| $(this).css("background-color") ...

javascriptjqueryhtmlcss

Manipulate image position with touchmove event using CSS3 transformations on an iPad

Looking to adjust the position of an image on my iPad3, but running into some difficulties. The movement isn't as smooth as desired and seems to lag behind the gestures being made. This is what I have so far (a 3MB base64 image) <img src="data:i ...

javascriptperformanceipadcsstransform

Modifying the CSS will not be reflected in the appearance

Currently, I am facing an issue on a website where I cannot make any changes to the CSS stylesheet. Whenever I attempt to modify a style, it appears to work temporarily but then reverts back to its original state once I release the mouse. It seems like the ...

cssdreamweaver

Concealing and organizing navigation bar items for mobile devices

Currently, my navbar looks like this on a larger screen: But here's how it appears on a smaller screen (phone): What I'm hoping to achieve is to make the U logo on the top left disappear and align "get in touch" closer to the other elements. On ...

htmlcsstwitter-bootstrap

Issues arise when using the react-vertical-timeline-component along with Next.js and TypeScript

Facing an issue with the react-vertical-timeline library as my library doesn't display the card with animation, showing only a line instead. The problem seems to be related to the incompatibility between the React library and my current application. ...

reactjstypescriptnext.js

Ways to position an absolute element in the middle of two CSS Grid cells

Is it possible to position an element with position: absolute between two grid cells, where half of the element is on the sidebar and the other half is on the rest of the page? The challenge arises when there is overflow set on both the sidebar and the pag ...

css

Positioning a div on top of an image

After browsing through various solutions, I still can't seem to get my div and image layout to work as intended. I have a div with an image that fills the entire space (set to 100% for responsiveness). I'm trying to overlay some text on the image ...

htmlcss

Top techniques for creating a popup window with React

I'm working on my React application and I'm looking to implement a popup window that displays a table with some data. However, I want this popup to appear in a separate browser window rather than as a modal attached to the application's DOM. ...

javascriptreactjsmodal-dialogwindow

Angular Fragmentary Perspective

I have a lengthy form in angular that I am currently working on. I'm wondering if there is a way to divide it into multiple views and then link each of them back to the main view. <div class="container"> <div class="row" id="part1"> ...

cssangularhtml

Encountering Errors while executing the yarn build or tsc commands

https://i.sstatic.net/JuueZ.pngWhenever I attempt to build a project or run the yarn tsc command, I encounter various types of errors. This seems to be due to them being installed in the incorrect location. But what could be causing this issue? Feel free ...

reactjstypescriptbuildtsc

How to target labels in CSS that end with a colon (*:)

Can CSS target labels that end with an asterisk and colon combination? Is this achievable? Let me elaborate further as per your request: Apologies if my explanation was not clear. I am working with an HTML label element that may end with an asterisk and ...

htmlcss