伸展的背景圖像

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; 
}