私は製品フィード自体を作成しようとしています。これには、行と列にすべて整列された多くの画像が含まれています。これまでのところ、最大の高さを強制的に小さくし、object-fit: を設定すると、問題なく見えますが、画面サイズを小さくすると、めちゃくちゃになり、個々のdivが再び異なるサイズになり、一部が他のものよりも高くなり、最終的に行が不足するか、少なくとも整列された行が不足します。
行に最大数のアイテムを配置します（大画面サイズなので8）が、動的であるため、ページに必要な行数もわかりません。次に、行を設定して言うことができます高さ10%。
また、サイトの現在の性質上、横向きの写真や縦向きの写真が隣り合っている場合、横向きの写真は表示するのに適切なサイズですが、明らかに平均よりも短いという問題もあります。
私が求めているのは、サーバーが最初に画像をダウンロードする必要がない、bootstrap/twig/php のみを使用する簡単な方法があると思います。これにより、sm 400px の場合は高さを 200px に設定できますが、代わりにピクセルは、そのビューポートサイズの「行の高さを設定」する可能性があります...ビューポートサイズが1つしかない場合、これは何年も前に行われていたでしょう...
HTML/小枝
<div class="col-xs-6 col-sm-4 col-md-2 col-lg-2 productlistcontainer">
<a href="../product?cat={{result.category_id}}&id={{result.product_id}}">
<img src={{result.image_url}} alt="product_image" class="productimages">
</a>
</div>
CSS
.productimages {
min-height:100%;
min-width:100%;
max-width:100%;
max-height:100%;
object-fit:contain;
}
ありがとう、どんな意見でも大歓迎です、
-ALLW