在 CSS 中提取和缩放图像的一部分答案

【问题标题】：Extract and scale part of image in CSS在 CSS 中提取和缩放图像的一部分
【发布时间】：2014-04-22 16:57:16
【问题描述】：

我想显示图像的一部分，并在网页中缩放我显示的图像部分（更大或更小）。使用 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 工作，所以答案需要在那里工作）

【问题讨论】：

developer.mozilla.org/en-US/docs/Web/CSS/background-size ?
@PeterRobinson 你在说的是css sprites。这是正确的终点
Background size with css with sprites的可能重复
background-size 在这种组合中不起作用——它似乎推翻了 background-position 属性，因此显示的图像部分位于左上角。
Background size with css with sprites 的答案没有帮助。这显示了如何使用 background-size 来调整背景图像的大小。问题是这不能使用背景位置和宽度来仅提取图像的一部分。

标签： html css image-scaling image-extraction

【解决方案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"
});

【讨论】：

是的！！！有用！！一个小提示：根据文档 backgroundSize: "50%" 应该可以工作。由于某种原因，我不明白，它不起作用。您必须像在此处一样指定重新缩放的图像尺寸（以像素为单位）。但话虽如此——完美。