1

無限スクロールを使用して、270 x270divで写真の束を表示しているページがあります。アスペクト比を維持するために、これらの画像を切り詰めようとしています。私はオーバーフローを使用してcssで動作するようになりました：隠されたものとそのようないくつかの微調整。ただし、画像が小さい場合はアップサイズにし、大きい場合はまず小さくしたいと思います。

今の私の最善の試みはimgonloadイベントで、これを行うjavascriptを実行しますが、パフォーマンスは本当に悪いです。

ユーザーがアップロードしたときに画像を切り抜いて、サムネイルバージョンと通常バージョンを保存する必要があると思います。私の質問は、JavaScriptでクライアントサイドの画像のトリミングを行っても、良好なパフォーマンスを維持できたということです（つまり、スクロールがぎくしゃくすることはありませんでした）。

4

1 に答える 1

2

私が理解しているように、270x270 px のブロックがあり、それらを完全に画像で埋めたいと考えています。画像を背景に移動して使用してみてくださいbackground-size:cover。

デモhttp://jsfiddle.net/heuku/1/

<div style="background-image:url(http://placekitten.com/100/200)"></div>
<div style="background-image:url(http://placekitten.com/200/100)"></div>
<div style="background-image:url(http://placekitten.com/200/200)"></div>

div {
  width:180px;
  height:170px;
  background-repeat:no-repeat;
  background-size:cover;
}

このソリューションは IE8 以下では機能しないことに注意してください。

于 2013-01-16T16:57:49.850 に答える