伸展的背景图像

Question

一部分我有包含多个标志的图像的图像：

我有一个div其具有尺寸：width:100px; height:50px。我想舒展每个标志以适应它：

.flag{ 
 
     width:100px; 
 
     height:50px; 
 
     background-image: url('http://icons.iconarchive.com/icons/famfamfam/flag/icons-390.jpg'); 
 
     background-position: 30px 25px; 
 
     background-size: 390px 260px; // actual size of image 
 
    }

<div class="flag"></div>

Answer 1

由于您的标志大小是16x11px，你想将其作为100x50px，你将不得不在x轴上缩放图像100/16 = 6.25倍，在y轴上缩放50/11 = 4.54倍。所以，你将有：

background-size: calc(390px * 6.25) calc (260px * 4.54); 

当然，这就是说你也必须相应地计算background-position中。因此，对于第一标志，我们将有：

.flag { 
 
    width: 100px; 
 
    height: 50px; 
 
    background-image: url('http://icons.iconarchive.com/icons/famfamfam/flag/icons-390.jpg'); 
 
    background-position: -38px -36px; 
 
    background-size: calc(390px * 6.25) calc(260px * 4.5); // actual size of image 
 
}

<div class="flag"></div>

其中，当然，看起来荒唐但是，它始终与拉伸图像发生。

现在，如果您真的了解了它，您可以使用image-rendering属性为FireFox和Chrome“修复一点”渲染。

.flag { 
 
    width: 100px; 
 
    height: 50px; 
 
    background-image: url('http://icons.iconarchive.com/icons/famfamfam/flag/icons-390.jpg'); 
 
    background-position: -38px -36px; 
 
    background-size: calc(390px * 6.25) calc(260px * 4.5); 
 
    image-rendering: -moz-crisp-edges; 
 
    image-rendering: pixelated; 
 
}

<div class="flag"></div>

Answer 2

使用无重复

<div class="flag"></div> 


//Style 
.flag{ 
    width:100px; 
    height:50px; 
    background-image: url('http://icons.iconarchive.com/icons/famfamfam/flag/icons-390.jpg'); 
    background-position-x: 30px; 
    background-position-y: 25px; 
    background-size: 390px 260px; // actual size of image 
    background-repeat: no-repeat; 
}