css - is it possible to shrink background image and keep the offsets

Question

I have an image that contains multiple images with x and y offsets

Is it possible to use this offsets and then shrink the image to a different width and height ?

Here is a sample of the image i get and the desired output

Thanks in advance

.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%;
}

<div class="container">
  full image
  <div class="full"></div>

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

标签： css

Answer 1

您应该能够使用该background-size属性并使用background-position百分比值来实现此目的。

例如，如果字符缩略图的实际大小为50x50，而您希望将其缩小为40x40，则可以将该background-size属性设置为图像尺寸的 80%。

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

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

这是您的fiddle的更新版本。