responsive grid of different sized images with real world proportions and scale

14
October 17, 2019, at 08:30 AM

I have a laravel site that loads product images into a grid-container--fit row through a @foreach loop. The images are all sorts of different sizes, some are portrait and some are landscape. The issue is that, because the grid container and the grid-elements are responsive (a percentage of the viewport width) the images are scaled inconsistently. For example, I have images that, full size, are 3 x 2, 5 x 9, and 8 x 10. When they're loaded into the responsive grid they pretty much are all scaled to 25% of the view port width. The resulting 'look' of the images in the grid displays the 5 x 9 images larger than the 8 x 10 images at scale. The distortion is more extreme if you consider portrait and landscape images of the same size. For instance, 5 x 7 and 7 x 5. the landscape images are scaled smaller than the portrait ones because they're all trying to fill a row according to a fixed minmax pixel width.

It can easily be rectified by a table structure rather than a responsive grid, but this is unacceptable!

here's the PHP loop

      <div class="product-grid-container grid-container--fit">
                    @foreach($products as $product)
                        <div class="grid-element">
                            <a href="/product/{!!$product->id !!}">
                                <img src="{{ asset($product->image) }}">
                            </a>
                        </div>
                    @endforeach
                </div>

and here's the CSS

 .product-grid-container {
    display: grid;
    max-width: none;
}
.grid-container--fit {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.grid-element {
  padding: 5%;
  color: #fff;
  text-align: center;
}
.grid-element img {
  max-height: 300px;
  max-width: 300px;
  object-fit: contain;
}
Answer 1

This is more of a design problem than a code one. The grid is working as intended, but your desired outcome is not a regular grid. Flexbox would be more in line with what you are trying to achieve, but another problem is how to scale your images without constraining them, and still have a proper look and feel. As long as you are forcing a max-height and/or max-width, the images will be shifted to a different scale depending on their original proportions. For that, you would provably need to know and/or control the dimensions of the original images, so that they have a nice enough proportion between each other. Then you could do something like this:

.product-grid-container { 
  display:   flex; 
  flex-wrap: wrap; 
  justify-content: center; 
  align-items: flex-start; 
} 
 
.grid-element { 
  padding: 24px; 
} 
 
.grid-element img { 
  max-width: 100%; 
  object-fit: contain; 
}
<div class="product-grid-container"> 
 
  <div class="grid-element"> 
    <img src="https://picsum.photos/400/200"> 
  </div> 
   
  <div class="grid-element"> 
    <img src="https://picsum.photos/250/450"> 
  </div> 
 
  <div class="grid-element"> 
    <img src="https://picsum.photos/400/500"> 
  </div> 
   
  <div class="grid-element"> 
    <img src="https://picsum.photos/250/350"> 
  </div> 
 
  <div class="grid-element"> 
    <img src="https://picsum.photos/450/250"> 
  </div> 
</div>

Answer 2

grid requires that spanning through rows or columns is to be set for each element, if you have no idea of the many rows or columns each img needs to make a patchwork, grid (display+grid-template-columns) won't be of any help.

column-width from https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Columns could help :

CSS Multi-column Layout is a module of CSS that adds support for multi-column layouts. Support is included for establishing the number of columns in a layout, as well as how content should flow from column to column, gap sizes between columns, and column dividing lines (known as column rules) along with their appearance.

calc() can also help here to mimic responsiveness sizing the columns.

The calc() CSS function lets you perform calculations when specifying CSS property values. It can be used anywhere a <length>, <frequency>, <angle>, <time>, <percentage>, <number>, or <integer> is allowed.

Demo below or a codepen to play with

div { 
  column-width:calc(100px + 10vw);/* mimic a bit minmax , tune to your needs */ 
  padding-left:2.5%; 
  margin:0; 
} 
img { width:90%; 
      margin:5% 0; 
}
<h1> column css, resize window's width to check behavior</h1> 
<div> 
<img src="http://dummyimage.com/100"> 
<img src="http://dummyimage.com/100x200"> 
<img src="http://dummyimage.com/150x200"> 
<img src="http://dummyimage.com/100x250"> 
<img src="http://dummyimage.com/300x200"> 
<img src="http://dummyimage.com/350x200"> 
<img src="http://dummyimage.com/100x120"> 
<img src="http://dummyimage.com/100x280"> 
<img src="http://dummyimage.com/200x200"> 
<img src="http://dummyimage.com/170x200"> 
<img src="http://dummyimage.com/100x180"> 
<img src="http://dummyimage.com/150x200"> 
<img src="http://dummyimage.com/100x250"> 
<img src="http://dummyimage.com/300x200"> 
<img src="http://dummyimage.com/350x200"> 
<img src="http://dummyimage.com/100x120"> 
<img src="http://dummyimage.com/100x120"> 
<img src="http://dummyimage.com/100x280"> 
<img src="http://dummyimage.com/200x200"> 
<img src="http://dummyimage.com/170x200"> 
<img src="http://dummyimage.com/100x180"> 
<img src="http://dummyimage.com/150x200"> 
<img src="http://dummyimage.com/100x250"> 
</div>

It can be a compromise, else, there is the masonry script for what you want to do.

READ ALSO
How to include jar files with java file and compile in command prompt

How to include jar files with java file and compile in command prompt

I have 3 jar files and ajava file that depends on these jar files

57
How can I put multiple checkbox results in a WHERE clause in SQL?

How can I put multiple checkbox results in a WHERE clause in SQL?

I need to write a WHERE clause against a varied number of categories in my databaseHow would I best approach this?

59
PHP rewriting URL to remove .php extension

PHP rewriting URL to remove .php extension

I am working on a project where I decided to get rid of thephp extension from the URL of my app

31
Getting the IP address of remote server in PHP

Getting the IP address of remote server in PHP

I'm in the process of building my first API driven appI am looking for a way to retrieve the server IP address that is making the request

32