html - 在 CSS 中提取和缩放图像的一部分

Question

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

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

这会在 url “myurl.jpg” 处拉入图像，并在该图像的位置 100,100 处显示一个 100 px 正方形的框：所以你看到的 myurl.jpg 就是那个小框。但是，我想让这个框在我的网页中变大或变小，比如将其缩放 50 px 正方形。我可以看到很多缩放背景图像的方法，同时显示它。（例如，非常简洁的 backstretch 插件（http://srobbin.com/jquery-plugins/backstretch/）。但我不明白如何同时提取和缩放。

请出主意！（我在 JQueryMobile 工作，所以答案需要在那里工作）

Answer 1

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

见演示 jsfiddle

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