My Laravel site is having an issue with inconsistently scaled product images loaded into a grid-container--fit row through a @foreach loop. The images vary in sizes and orientations, causing them to be scaled unevenly when displayed on the responsive grid. For example, portrait images may appear larger than landscape images of the same size due to the fixed min-max pixel width constraints.
While a table structure could easily rectify this problem, it is not an acceptable solution!
Below is 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>
Here's the corresponding 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;
}