Question

是否可以调整从sprite接收的图像的大小。我的意思是这样的：

background: url(../images/sprite.png) no-repeat -1px -1170px;
display: block;
height: 14px;
width: 14px;

是否可以改变精灵的宽度和高度？例如，如果我在sprite中有铅笔图标，分辨率为40x40，但我想显示此铅笔图标，如20x20像素

提前谢谢你。

Answer 1

另一种解决方案是使用css3的zoom: .5;属性。

Answer 2

您可以在css3中使用background-size属性：

background-size: 50% 50%;

Answer 3

在Google上搜索此答案后，我在此处找到了一个解决方案：https://stackoverflow.com/a/10826761/2100636

它的工作原理是它具有响应性，虽然它没有使用背景图像来执行它...它在所有浏览器中都有效，而不是使用background-size选项，它在旧浏览器中不起作用 - 这种方法可以。*

*至少当我测试它时。

您可以在此处查看演示：http://tobyj.net/responsive-sprites/

我在左边有一个图标，右边有文字的情况下使用了它，它会缩小我的图标以保持响应。

Answer 4

更改background-size将使您每次都必须重新验证容器的width和height。

使用zoom时，您不会支持firefox

...

另一种选择是使用：

transform: scale(.5); /* 50% smaller */
transform: scale(1.5); /* 50% bigger */

背面是缩放后的元素仍将保留其原始空间。

Answer 5

background-size正是您要找的。

#example1 {
    background-size: 40px 40px;
}
#example2 {
    background-size: 20px 20px;
}

Answer 6

使用变换只会改变图像的缩放而不是大小。为了将精灵图像大小从40px更改为40px到20px更改20px，您需要将精灵图像的大小更改为20px×20px，然后调整背景大小以适合该区域中的图像精灵。此外，您需要调整背景位置，以显示精灵的正确部分。

#home {
    width: 46px;
    height: 44px;
    background: url(https://www.w3schools.com/css/img_navsprites.gif) 0 0;
}

#next {
    width: 43px;
    height: 44px;
    background: url(https://www.w3schools.com/css/img_navsprites.gif) -91px 0;
}


#resizedHome {
    width: 20px;
    height: 20px;
    background: url(https://www.w3schools.com/css/img_navsprites.gif) 0 0;
    background-size: 306%;
}

#resizedNext {
    width: 20px;
    height: 20px;
    background: url(https://www.w3schools.com/css/img_navsprites.gif) -102px 0;
    background-size: 306%;
}

<h5>
Original Sprite Image
</h5>
<img id="home" ><br><br>
<img id="next" >
<br><br>
<h5>
Resized Sprite Image
</h5>
<img id="resizedHome" ><br><br>
<img id="resizedNext" >

或

https://jsfiddle.net/vivek11432/ep0m4yf6/

Answer 7

2018解决方案：

假设我们有5X4的网格精灵。

第一步是修正背景图像相对于continener

的大小

.sprite{ background-size: 500% 400%; }

现在我们有响应精灵。

接下来是使用precente来定位背景，这样我们的数字就会显示出来。计算是这样的：

background-position: calc( var(--colum) * 100% / 5 - 1) calc(var(--row) * 100% / 4 - 1);

现在在每个图中我们需要定义colium colum和row is position

.figure1{ --row:1, --column:0 }
.figure2{ --row:1, --column:1 }
// etc...

所以我们有：

.sprite{
     background-size: 500% 400%;
     background-position: calc( var(--colum) * 100% / 4) calc(var(--row) * 100% / 3); 
 }

.figure1{ --row:0, --column:0 }
.figure2{ --row:0, --column:1 }
.figure3{ --row:0, --column:2 }
.figure4{ --row:0, --column:3 }
.figure5{ --row:1, --column:0 }
// etc...

带卡片的精彩演示：https://repl.it/@perymimon/responsive-sprite

完整标签：https://responsive-sprite--perymimon.repl.co/

从精灵调整图像大小

7 个答案: