背景比例，因此部分图像填充 div答案

【问题标题】：Background scale so part of image fills div背景比例，因此部分图像填充 div
【发布时间】：2017-08-10 05:03:23
【问题描述】：

我有一张图片（假设是100px by 100px）。我想将图像用作 div 的背景，但是我只希望第一个 50px by 50px 可见（其他三个“角”将用作其他背景）。我还想缩放图像，以便我指定的图像部分填充 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，红色是我希望在背景中可见的内容，而蓝色和红色是整个源图像。

这类似于this question，但该答案已有数年历史，也不会重新缩放图像。

【问题讨论】：

标签： html css reactjs

【解决方案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 */
}

&lt;div&gt;

PS：reactwise 你需要将连字符的属性用驼峰命名（例如：background-size 将变为 backgroundSize）

【讨论】：