I am stuck in image dimension change on-screen responsiveness. I have 4 products with images in one row. I wanted Images in square shape so I gave them the fixed height and auto width. they were looking good, but when I changed the screen dimensions/responsiveness, they ignored the fixed height and malfunctions. Full-screen In full screen, there is the default width assigned to each product of 25%. The images look square. Different smaller dimensions. In different screen dimensions, they do not follow the square shape. What do I need? I need them in a square shape, regardless of the screen dimensions, for example, if they were 300x300 on full screen, they should be at least 200x200 on small screen, and so on. Is there any way we can calculate dynamically, the dimensions of images according to the the screen dimensions in CSS? Code /* css here */ <div class="bee-col-items" style="width:25%"> <div class="bee-product-inner" style="border: 1px"> <div class="bee-product-image" style="position:relative; height:332px; width:auto;"> <img style="object-fit:fill; width:100%; height:100%; " src="" /> </div> </div> </div> Run code snippetExpand snippet I need your help regarding this. Thanks in advance.
Jese Leos
August 19, 2024
Verified user
You could use css grid or flex, and use aspect-ratio and object-fit to display the images as squares regardless of their size. Here's an example: .img-container { width: 100%; background-color: lightgrey; display: grid; grid-template-columns: repeat(4, 1fr); } img { width: 100%; aspect-ratio: 1/1; object-fit: cover; object-position: center center; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="main.css"> </head> <body> <div class="img-container"> <img src="https://plus.unsplash.com/premium_photo-1720886073981-f975d3dc93f8"> <img src="https://plus.unsplash.com/premium_photo-1720886073981-f975d3dc93f8"> <img src="https://plus.unsplash.com/premium_photo-1720886073981-f975d3dc93f8"> <img src="https://plus.unsplash.com/premium_photo-1720886073981-f975d3dc93f8"> </div> </body> </html> Run code snippetExpand snippet
Jese Leos
August 19, 2024
Verified user
Use the combination of CSS properties, such as aspect-ratio and media queries to resolve this issue. 1. Aspect-ratio of 1:1 to maintain the square shape: With this CSS property HTML element is going to be square no matter what size appears on the screen. 2. Media Queries: Use media queries to adjust the size of the images based on different screen widths. This will ensure that your images maintain a square shape and adjust their size dynamically based on the screen dimensions.
Jese Leos
August 19, 2024
Verified user
Doing the aspect ratio trick with css will work for this. For a square using aspect ratio 1:1 is good. See below. * { box-sizing: border-box; padding: 0; margin: 0 } .aspect-ratio { width: 200px; /* set any width and it will maintain 1:1 (aka square) */ position: relative; overflow: hidden; } .aspect-ratio::before { content: ''; display: block; padding-top: 100%; /* aspect ratio 1:1 */ } .aspect-ratio img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } <div class="aspect-ratio"> <img src="https://placehold.co/600x400" alt="Placeholder Image" /> </div> Run code snippetExpand snippet padding-top is the main one for the aspect ratio. if set to 100% it will mean that for width of a length, height will also be that length, if you change the 100% to something else, you maintain a different ratio.