1

最近、Pinterest Webサイトのページコードを調べて、CSSのデザインのコツを学びました。私が観察したことの1つは、CSSスタイルを使用して各画像の高さを設定していることです。192pxの均一な幅を実現するためにすべてのサイズが変更されていることは明らかであるため、これは私には奇妙です。幅ではなく高さを設定する技術的な理由はありますか？

例：

<img src="http://media-cache-ec8.pinterest.com/upload/30962316158222159_nQdVRIXP_b.jpg" alt="Summer camp" class="PinImageImg" style="height: 163px;">
4

2 に答える 2

5

Pinterest は JQuery 石積みを使用しています。http://masonry.desandro.com/ さて、Pinterest のようにオブジェクトを浮かせるために石積みを使用しようとすると、次のようになります。どれだけズームインしてもズームしても、オブジェクトが配置されないポイントが来ます。オブジェクトの幅を設定して遊んでみると、「Pinterest の 192px」の背後にある数学にすぐに気付くでしょう。適切なパディングとマージンを与えた後、配置の適切な機能のためにこの特定の幅を割り当てる必要があります。Pinterest に似た Web サイトの開発に取り組んだことがありますが、「Pinterest の 192px 幅」の背後にあるロジックを解読するのに 1 週​​間以上かかりました

于 2012-06-26T04:53:10.297 に答える
0

画像の「アスペクト比」は常に最適であるとは限りません。X の高さと Y の幅にサイズ変更すると、幅と高さの比率によっては、結果の画像が予想よりも幅が広くなったり高くなったりすることがあります。css で固定の高さを設定する場合は、それよりも大きくならないようにします (そして、デザインが「壊れる」ことはありません)。

于 2012-06-26T00:29:14.543 に答える