html css从tileset调整图像大小 [英] html css resize image from tileset

问题描述

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

I'm pulling an image from a tile set at the size of 50px x 50px. I want to be able to make this image depending on what size I want it. Is there a way to pull out this image and resize it without having to deal with background-size? Perhaps pull this image into a div and resize the div?

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

比如说我拿出50 x 50的瓷砖但是我想要调整大小75 x 75。

Say for example I'm pulling out a tile 50 x 50 but I want to resize it 75 x 75.

推荐答案

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

When using css sprites you must give them fixed width and height.

这意味着没有办法让它们动态调整大小。

This means that there is no way to get them to resize dynamically.

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

If however you know a fixed set of new dimensions you might need for your div -

你可以：

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

1) Add new variations of the image within the sprite or

2）使用比例来处理这个问题。这样的事情：

2) Use scale to take care of this. Something like this:

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

这篇关于html css从tileset调整图像大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！