html css 从 tileset 调整图像大小

Question

我正在从 50 像素 x 50 像素大小的图 block 集中提取图像。我希望能够根据我想要的尺寸来制作这张图片。有没有办法拉出这张图片并调整它的大小而不必处理背景大小？也许将此图像拉入 div 并调整 div 的大小？

img.tileone
{
width:50px;
height:50px;
background:
url(images/summertile.png) -1px -1px;
}

例如，我正在拉出一个 50 x 50 的图 block ，但我想将其调整为 75 x 75。

Answer 1

当使用 css sprites 时，你必须给它们固定的宽度和高度。

这意味着无法让它们动态调整大小。

但是，如果您知道 div 可能需要的一组固定的新尺寸 -

你可以:

1) 在 sprite 或中添加图像的新变体

2) 使用比例尺来解决这个问题。像这样:

.tileone {
   background-image: url(images/summertile.png) -1px -1px;
   -webkit-transform: scale(1.5, 1.5);
   transform: scale(1.5, 1.5);
 }