Html 背景比例使图像的一部分填充div

我有一个图像（假设它是

100px乘100px

）。我想使用图像作为div的背景，但是我只希望第一个

50px乘50px

可见（其他三个“角”将用作其他背景）。我还希望缩放图像，以便我指定的图像片段填充div。例如，如果我的div是

150px乘150px

，我希望按图像裁剪为

50px乘50px

，然后将其渲染为

150px乘150px

---

我可以像这样在背景中渲染图像（使用

react

）：

，但是这并不能将图像缩放回我想要的大小。如何才能达到我想要的效果

---

下面的图片描述了它，其中黑色的正方形是div，红色是我想要在背景中可见的内容，而蓝色和红色是整个源图像

---

这与类似，但是答案是几年前的，并且也不会重新缩放图像。

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

然后使用“背景位置”选择所需的部分：

div{
背景图像：url（'http://lorempixel.com/output/abstract-q-c-100-100-9.jpg');
高度：150像素；
宽度：150px；
背景大小：200%200%；
背景位置：0；//位于左上角
/*背景位置：100%100%//位于右下角*/
}

background-size:200% 200% ;