使用CSS从sprite调整图像

我有一个CSS sprite，其大小为32x32px的各种图标。使用CSS从sprite调整图像

现在我需要的是显示20x20px大小的图标之一。我尝试了一些东西，比如使用background-size：cover或者使用transform：scale（0.625）来设置大小为20px，但我的努力没有给出我想要的结果。

HTML我的测试：

32px icons: 

<div class="sprite" style="background-position:0px 32px;">&nbsp;</div> 
<div class="sprite" style="background-position:64px 32px;">&nbsp;</div> 
<div class="sprite" style="background-position:32px 96px;">&nbsp;</div> 
<div class="sprite" style="background-position:0px 0px;">&nbsp;</div> 
<div class="sprite" style="background-position:32px 64px;">&nbsp;</div> 

<hr> 
20px icons (attempts): 

<div class="sprite" style="background-position:32px 64px; width:20px; height:20px;">&nbsp;</div> 
<div class="sprite" style="background-position:32px 64px; width:20px; height:20px; background-size:cover;">&nbsp;</div> 
<div class="sprite" style="background-position:32px 64px; width:20px; height:20px; transform:scale(0.625);">&nbsp;</div>

CSS对我的测试：

.sprite { 
    background-image:url(http://buildnewgames.com/assets/article//dom-sprites/spritesheet.png); 
    width:32px; 
    height:32px; 
}

请看看这个小提琴，看看我的尝试：

https://jsfiddle.net/dfqh0yrc/4/

来源

2016-12-15 pimeys

的可能的复制[我怎么能扩展在CSS精灵的图像（http://stackoverflow.com/questions/2430206/how-can-i-scale- an-image-in-a-css-sprite） – Punit

您只能使用scale没有width和height像下面这样：

.sprite { 
 
    background:url(http://buildnewgames.com/assets/article//dom-sprites/spritesheet.png); 
 
    width:32px; 
 
    height:32px; 
 
}

32px icons: 
 
<div class="sprite" style="background-position:0px 32px;">&nbsp;</div> 
 
<div class="sprite" style="background-position:64px 32px;">&nbsp;</div> 
 
<div class="sprite" style="background-position:32px 96px;">&nbsp;</div> 
 
<div class="sprite" style="background-position:0px 0px;">&nbsp;</div> 
 
<div class="sprite" style="background-position:32px 64px;">&nbsp;</div> 
 
<hr> 
 
20px icons (attempts): 
 
<div class="sprite" style="background-position:32px 64px; transform:scale(0.625);">&nbsp;</div> 
 
<div class="sprite" style="background-position:32px 64px; transform:scale(calc(20/32));">&nbsp;</div>

您还可以使用calc来计算像以下的比例因子：

<div class="sprite" style="background-position:32px 64px; transform:scale(calc(20/32));">&nbsp;</div>

演示上的jsfiddle：https://jsfiddle.net/dfqh0yrc/5/

来源

2016-12-15 07:02:35

这适用于调整32px到20px的大小！但是，当从24像素调整为20像素时，我遇到了一个小问题，这恰好是0.8333333333333333的比例。它看起来像缺少一个像素，可能是由于四舍五入，使其看起来与布局的其余部分没有对齐。有没有办法解决这个缺失的像素？ – pimeys

你可以提供一个图像的网址与24像素精灵？尝试计算方法'calc（20/24）' –

这里有一个新的小提琴，有一个24像素的精灵。我试图在图像周围制作绿色的'.s20'。如果它是一个20px的东西，它应该在中间完美对齐，不是吗？ https://jsfiddle.net/dfqh0yrc/6/ – pimeys

尝试使用背景大小 CSS。

示例：background-size：25％25％;

希望这可以解决您的问题。

来源

2016-12-15 07:01:58 Thamizhselvan

使用CSS从sprite调整图像

回答

相关问题