3

画像の一部を表示し、Web ページ内で表示する画像の一部を拡大または縮小したいと考えています。css を使用して画像の一部を表示するのは非常に簡単です。次に例を示します。

$("#myDiv").css({
  width: 100,
  height: 100,
  background: "url('myurl.jpg')",
  backgroundPosition: "-100px -100px"
});

これは、url "myurl.jpg" の画像を取得し、その画像の 100,100 の位置に 100 ピクセルの四角形のボックスを表示します。したがって、myurl.jpg で表示されるのはその小さなボックスだけです。ただし、このボックスを Web ページ内で大きくしたり小さくしたりしたいと思います。たとえば、50 ピクセルの正方形にスケーリングします。すべてを表示しながら、背景画像をスケーリングする方法はたくさんあります。(たとえば、非常にきちんとしたバックストレッチ プラグイン ( http://srobbin.com/jquery-plugins/backstretch/ )。しかし、抽出とスケーリングを同時に行う方法がすぐにはわかりません。

アイデアください！（私はJQueryMobileで働いているので、答えはそこで働く必要があります）

4

1 に答える 1

3

backgroundSize 属性が欠落しているようです。

デモを見る

$("#myDiv").css({
  width: 200,
  height: 50,
  background: "url('http://lorempixel.com/400/1000/sports/3/')",
  backgroundPosition: "0 -365px",
  backgroundSize: "200px 500px"
});
于 2014-03-17T15:00:26.623 に答える