javascript - ページ ビューやヒット数に応じて Web サイトの画像のサイズを大きくするにはどうすればよいですか?

Question

シナリオ:

私は、一連の画像をまとめて並べた非常に基本的な html サイトを持っています。画像は対応する記事にもリンクされており、カーソルを各画像の上に置くと、リンクされた記事の大きな説明がページの中央に生成されます。

目標：

1. 画像のリンクされた記事が受け取るページビューの数に対して、画像のサイズを数パーセント拡大したいと考えています。記事がヒットするほど、画像リンクが大きくなります。
2. 同時に、画像 (縦横比/寸法が異なります) は自動的に並べ替えられるか、応答性の高い方法でページに最適に収まるようにシャッフルされます。

どんな考え、アイデア、または意見でも大歓迎です。

Answer 1

このための最良の出発点は、ここで学ぶことができるフレックスボックスだと思います。

ここでの重要な側面は次のとおりです (上記の同じソースから)。

box-flex 値: 0 | 任意の整数 この子の柔軟性の比率。子に 1 があり、兄弟に 2 がある場合、親ボックス内の追加のスペースは、兄弟によって 2 倍消費されます。デフォルトは 0 で、柔軟性がありません。

したがって、これを設定して、一部のボックスが他のボックスよりも多くのスペースを占めるようにすることができます。明らかに、これにはいくつかの計算を行う必要がありますが。