Html 拉伸背景图像的一部分

我有一个包含多个旗帜图像的图像：

我有一个

div

，它的尺寸是：

宽度：100px；高度：50px

。我想把每面旗都拉长以适合它：

.flag{
宽度：100px；
高度：50px；
背景图像：url（'http://icons.iconarchive.com/icons/famfamfam/flag/icons-390.jpg');
背景位置：30px 25px；
背景大小：390px 260px；//图像的实际大小
}

不要重复

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

//风格
.国旗{
宽度：100px；
高度：50px；
背景图像：url（'http://icons.iconarchive.com/icons/famfamfam/flag/icons-390.jpg');
背景位置x:30px；
背景位置y:25px；
背景大小：390px 260px；//图像的实际大小
背景重复：无重复；
}

由于您的标志大小为16x11px，并且您希望将其显示为100x50px，因此您必须在x轴上缩放图像100/16=6.25倍，在y轴上缩放图像50/11=4.54倍。因此，您将有：

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

当然，这意味着您还必须相应地计算

背景位置。因此，对于第一面旗帜，我们将有：


.flag{
宽度：100px；
高度：50px；
背景图像：url（'http://icons.iconarchive.com/icons/famfamfam/flag/icons-390.jpg');
背景位置：-38px-36px；
背景大小：calc（390px*6.25）calc（260px*4.5）；//图像的实际大小
}
vut如何计算新位置
background position:-38px-36px
@AzeemHaider在那一个位置，我是手动操作的，但它是“旗帜从左侧的距离*6.25米，旗帜从顶部的距离*4.5”，在本例中是：6*6.25，8*4.5。