html css从tileset调整图像大小答案

【问题标题】：html css resize image from tilesethtml css从tileset调整图像大小
【发布时间】：2013-06-15 18:23:42
【问题描述】：

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

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

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

【问题讨论】：

改变整个图片的大小和div的大小然后隐藏溢出呢？
你有一个背景图片，你不想给它一个大小。但是你不想设置背景图片大小？？？
当我改变图像的大小时，它会从图块集中拉出更多。我拉出的图像是 50 x 50，如果我将其更改为 75 x 75，它会拉出下一张图像的一半。
我认为 background-size 只会改变图块集的大小。如果我这样做，我怎样才能得到完美的图像像素？例如，如果 div 是 100px，并且图像需要是 33.3%，我如何确保从图块集中拉出正确的图像？我认为有一种方法可以将图像拉出 50 x 50，然后将其视为单个图像以更改其大小。
当你说tileset - 我想你的意思是sprite :)

【解决方案1】：

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

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

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

你可以：

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

2) 使用规模来解决这个问题。像这样的：

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

【讨论】：

这是迄今为止我得到的最接近的！不幸的是，我无法更改特定的像素大小，但我可以更改我的其他代码来完成这项工作。谢谢！我的代码是img.tileone {width: 50px;height: 50px;background: url(images/summertile.png) -1px -1px;-webkit-transform: scale(1.5,1.5);transform: scale(1.5,1.5);}
请原谅这种格式，我似乎无法弄清楚这个网站。

【解决方案2】：

可能是 article 或 stackoverflow 上的 question 可能会对您有所帮助。

看看他们俩。

【讨论】：

我看过了，特别是关于 stackoverflow 的问题显示图像保持相同大小但占用了我不想要的空间。我希望图像是 div 的大小，所以 50x50 的图像变成 75x75 并占据整个空间。
那篇文章对您有帮助吗？ @Sjrsmile