Question

我想显示图像的一部分，并缩放我在网页中显示的图像部分（更大或更小）。使用css显示图像的一部分非常容易，例如：

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

这会在url＆＃34; myurl.jpg＆＃34;中拉出图像，并在该图像的100,100位置显示一个100 px的方框：所以你看到的myurl.jpg就是那个小盒子。但是，我想在我的网页中使这个框更大或更小，比如缩放50像素。我可以看到很多缩放背景图像的方法，同时展示了所有这些。（例如，非常简洁的后伸插件（http://srobbin.com/jquery-plugins/backstretch/）。但我不容易看到如何同时提取和缩放。

想法！（我在JQueryMobile工作，所以答案需要在那里工作）

Answer 1

看起来你只是缺少backgroundSize属性。

<强> See demo jsfiddle

$("#myDiv").css({
  width: 200,
  height: 50,
  background: "url('http://lorempixel.com/400/1000/sports/3/')",
  backgroundPosition: "0 -365px",
  backgroundSize: "200px 500px"
});

在CSS中提取和缩放部分图像

1 个答案: