0

タイトルが良くないかもしれませんが、説明させてください。高さの最小値は50pxで、最大値は612pxです。次に、高さ800px、幅が動的なボックスに収まる必要がある大量の画像があります。

トリックは、各画像に値があることです。これをlikesと呼ぶことができます。私がやりたいことは、「いいね」が最も多い画像のサイズを 612px にし、「いいね」が最も少ない画像の高さを 50px にすることです。残りの画像は、最小値と最大値に対する「いいね」の数に応じてサイズ変更する必要があります。すべての画像は正方形サイズです。

算数がまとまりません。皆さんが助けてくれることを願っています:)

HTML の例:

<div class="container">
  <article class="item" data-likes="500"><img src="foo.jpg"></article>
  <article class="item" data-likes="100"><img src="bar.jpg"></article>
  <article class="item" data-likes="350"><img src="baz.jpg"></article>
</div>
4

1 に答える 1

1

これを試してください（すべての画像ソースファイルが612 x 612最初にあると仮定して...）：

img_size = 50 + Math.round( (612-50)*((img_likes-min_likes)/(max_likes-min_likes)) );
img_size *= 800/612;
于 2013-06-17T10:59:05.480 に答える