背景比例所以图像的一部分填充div

Question

我有一张图片（让我们说出来100px by 100px）。我想使用图像作为div的背景，但我只希望第一个50px by 50px可见（其他三个＆＃39;角将用作其他背景）。我还想缩放图像，以便我指定的图像片段填充div。例如，如果我的div为150px by 150px，我想按图片裁剪为50px by 50px，然后将其渲染为150px by 150px。

我可以像这样在背景中渲染图像（使用react）：<div style={{width: '5vh', height: '5vh', background: 'url(./image) 0px 0px'}}></div>，但是这不会将图像缩放回我想要的尺寸。我怎样才能达到我想要的效果呢？

是否在下图中描述了黑色正方形是div，红色是我想要在背景中看到的内容，而蓝色＆amp;红色是整个源图像。

这类似于this question，但这个答案已有几年的历史，并且不会重新缩放图像。

Answer 1

要将图像分成四个，您需要将其尺寸加倍（相对于包含div）

background-size:200% 200% ;

然后使用background-position选择所需的部分：

div{
  background-image: url('http://lorempixel.com/output/abstract-q-c-100-100-9.jpg');
  height: 150px;
  width: 150px;
  background-size:200% 200% ;
  background-position: 0 0; // is top-left
  /* background-position: 100%  100%// is bottom-right */
}

<div>

PS：反应你需要骆驼使用已加强的属性（例如：background-size将成为backgroundSize）