背景缩放以使图像的一部分填充div

Question

我有一张图片（假设它是100像素乘以100像素）。我想把这张图片作为div的背景，但我只想让前50像素乘以50像素可见（其他三个“角落”将用作其他背景）。我还想缩放图像，使我指定的图像部分填充div。例如，如果我的div是150像素乘以150像素，我想裁剪我的图像为50像素乘以50像素，然后将其呈现为150像素乘以150像素。

我可以像这样在后台渲染图像（使用react）：<div style={{width: '5vh', height: '5vh', background: 'url(./image) 0px 0px'}}></div>，但这不会将图像缩放回我想要的大小。如何实现我想要的效果？

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

这类似于此问题，但该答案已经过时并且也不会重新调整图像大小。

- perennial_

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: 在React中，您需要将带有连字符的属性转换为驼峰式（例如：background-size会变成backgroundSize）。

- maioman