Question

我的图像包含多个带x和y偏移的图像

是否可以使用此偏移然后将图像缩小到不同的宽度和高度？

以下是我获得的图像和所需输出的示例

提前致谢

＆＃13;

.container {
  width: 960px;
}

.full {
  background: url('http://ddragon.leagueoflegends.com/cdn/8.5.2/img/sprite/champion1.png') no-repeat;
  width: 100%;
  height: 200px;
}

.img-container {
  width: 40px;
  height: 40px
}

.shrinked {
  background: url('http://ddragon.leagueoflegends.com/cdn/8.5.2/img/sprite/champion1.png') -48px -48px no-repeat;
  height: 100%;
  width: 100%;
}

＆＃13;

<div class="container">
  full image
  <div class="full"></div>

  40px centered
  <div class="img-container">
    <div class="shrinked"></div>
  </div>
</div>

＆＃13;

Answer 1

您应该可以使用background-size属性并使用background-position作为百分比值来实现此目的。

例如，如果角色缩略图的实际尺寸为 50x50 ，并且您希望将其缩小到 40x40 ，则可以设置{{1} }属性为图像尺寸的80％。

考虑到您的图片尺寸 480x144 ，您的background-size将 384x115.2 。

此外，在使用background-size的百分比值时，请确保您它的工作方式很清楚。 This应该帮助你。

以下是fiddle的更新版本。

是否可以缩小背景图像并保持偏移

1 个答案: