裁剪然后拉伸背景图像以适合区域答案

【问题标题】：Crop then stretch background image to fit an area裁剪然后拉伸背景图像以适合区域
【发布时间】：2019-06-08 22:18:36
【问题描述】：

我有一个 800 像素宽、500 像素高的图像，我希望第一次裁剪大约 500 像素。 x pix 左侧，y pix 右侧，z pix 底部，然后将其放入 1200 像素宽、1000 像素高的背景区域，其中 x、y 和 z 都是不同的。

我也试图让它无响应，这样它就不会随着窗口大小的改变而缩放，所以设置background-size = cover 或contain 不是一个选项。任何建议都将不胜感激，例如我是否可以先裁剪图像，然后将其填充到我的区域。谢谢。

【问题讨论】：

如果我理解正确的话，听起来你可以使用background-position 来获得想要的效果。而且您知道这会使图像不成比例地拉伸，对吗？

标签： html css crop fill stretch

【解决方案1】：

如果没有一些棘手的 javascript，我认为您无法完成此任务。但是我把它放到这里的代码中，这样其他人会更容易看——当你提出最初的问题时，这是一件好事。

按原样，这使用 background-position-x 和 -y 来“裁剪”图像的某些部分，然后如果有一种方法可以放大到足够大，您也可以裁剪另一端，我想.

.container {
border: solid black 1px;
height: 1000px;
width: 1200px;
background-image: url(https://snag.gy/dL487F.jpg);
background-position-x: -100px;
background-position-y: -50px;
background-repeat: no-repeat;
}

<div class="container">

</div>

【讨论】：

【解决方案2】：

你可以考虑background-size结合百分比和像素值得到你想要的：

.container {
  background-image:url(https://picsum.photos/800/600?image=1069);
  background-size:
    calc(100% + 100px + 200px) /*100% + x + y*/
    calc(100% + 50px); /*100% + z*/
  background-position:-100px 0; /*we shift by x*/
  background-repeat:no-repeat;
  
  width:1200px;
  height:1000px;
}

<div class="container">

</div>

您还可以添加 CSS 变量来轻松控制：

.container {
  --x: 100px;
  --y: 200px;
  --z: 50px;
  background-image: url(https://picsum.photos/800/600?image=1069);
  background-size: calc(100% + var(--x) + var(--y)) calc(100% + var(--z));
  background-position: calc(-1 * var(--x)) 0;
  background-repeat: no-repeat;
  
  width: 1200px;
  height: 1000px;
}

<div class="container">

</div>

【讨论】：