拉伸背景图像的一部分

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