css - 如何将裁剪后的图像扩展到盒子中？

Question

我得到一张 JPEG 图像，需要使用 CSS 对其进行裁剪，然后将其展开以适应 1200px x 1000px 框。

这是我目前所拥有的:

#top-image {
    display: block;
    clip-path: inset(0px 103px 45px 105px);
    margin-left: auto;
    margin-right: auto;
    width: 1200px;
    height: 1000px;
}

<img src="https://via.placeholder.com/750x500" id="top-image">

clip-path 属性裁剪 750px x 500px 的原始图像。当我将宽度和高度设置为上面代码段中提到的值时，会出现两个问题:

• clip-path 中使用的像素值基于新的 1200 x 1000 框，而不是原始图像。

• 原始(未交叉)图像(包括裁剪部分)扩展到方框。但是，我想扩大裁剪后的图像以填充框。

  使用纯 CSS 执行此操作的最佳方法是什么？

更新 1:我可以使用百分比而不是像素来解决第一个问题。

Answer 1

为此使用背景并调整background-size/background-position:

#top-image {
    display: block;
    /*clip-path: inset(0px 103px 45px 105px);*/
    width: 1200px;
    height: 1000px;
    background-image:url(https://picsum.photos/1200/1000?image=0);
    
    background-size:
      calc(100% + 103px + 105px) /*100% of the width + the cropped part*/ 
      calc(100% + 45px); /*100% of the height + the cropped part*/
    background-position:
      -103px /*we shift to the left to crop the 103px*/
      0; /*we keep at the top and the bottom will be cropped*/
}

<div id="top-image"></div>

上面的将根据容器裁剪像素。如果您需要根据图像尺寸进行裁剪，请执行以下操作:

#top-image {
    display: block;
    /*clip-path: inset(0px 103px 45px 105px);*/
    width: 1200px;
    height: 1000px;
    background-image:url(https://picsum.photos/750/500?image=1069);
    
    background-size:
      calc(750px*(1200/(750 - 103 - 105)))  
      calc(500px*(1000/(500 - 45))); 
    background-position:
      calc(-103px*(1200/(750 - 103 - 105))) 
      0; 
}

<div id="top-image"></div>

您的图像的高度为 500px，您想要裁剪 45px 因此我们将有 455px 需要覆盖 1000px 所以我们需要乘以 1000/455。与宽度相同的逻辑。考虑到相同的乘法，我们需要将位置移动 103px crop。

---

我们也可以用不同的方式来写。

我将使用下图 (300x150)，我将从左边裁剪 100px，从右边裁剪 60px，距顶部 10px，距底部 45px。然后它将覆盖一个尺寸为 400x200 的容器。我们应该只看到黄色部分。

.image {
    display: block;
    margin:5px;
    width: 400px;
    height: 200px;
    background-image:url(/image/Xde45.png);
    
    background-size:
      calc(300px*(400/(300 - 100 - 60))) 
      calc(150px*(200/(150 - 10  - 45))); 
    background-position:
      calc(-100px*(400/(300 - 100 - 60))) 
      calc(-10px *(200/(150 - 10  - 45)));
}
.alt {
    background-size:
      calc(100% + (100 + 60)*(400px/(300 - 100 - 60))) 
      calc(100% + (45 + 10) *(200px/(150 - 10 -  45))); 
    background-position:
      calc(-100*(400px/(300 - 100 - 60))) 
      calc(-10 *(200px/(150 - 10  - 45)));
}
.alt2 {
  --c-left:100;  /*crop left*/
  --c-right:60;  /*crop right*/
  --c-bottom:45; /*crop bottom*/
  --c-top:10;    /*crop top*/
  --c-x:calc(var(--c-right) + var(--c-left));
  --c-y:calc(var(--c-top) + var(--c-bottom));
  background-size:
      calc(100% + var(--c-x)*(100%/(300 - var(--c-x)))) 
      calc(100% + var(--c-y)*(100%/(150 - var(--c-y)))); 
    background-position:
      calc(-1*var(--c-left)*(400px/(300 - var(--c-x)))) 
      calc(-1*var(--c-top) *(200px/(150 - var(--c-y)))) ;
}

<div class="image"></div>
<div class="image alt"></div>
<div class="image alt2"></div>

我们可以采用最后一种语法并考虑更多变量以获得更动态和更灵敏的:

.image {
    display: block;
    margin:5px;
    width: var(--w,400px);
    height: var(--h,200px);
    background-image:url(/image/Xde45.png);
    --c-left:100;  /*crop left*/
    --c-right:60;  /*crop right*/
    --c-bottom:45; /*crop bottom*/
    --c-top:10;    /*crop top*/
    
    --c-x:calc(var(--c-right) + var(--c-left));
    --c-y:calc(var(--c-top) + var(--c-bottom));
    background-size:
      calc(100% + var(--c-x)*(100%/(300 - var(--c-x)))) 
      calc(100% + var(--c-y)*(100%/(150 - var(--c-y)))); 
    background-position:
      calc(-1*var(--c-left)*(var(--w,400px)/(300 - var(--c-x)))) 
      calc(-1*var(--c-top) *(var(--h,200px)/(150 - var(--c-y)))) ;
}

<div class="image"></div>
<div class="image" style="--w:200px;--h:100px;"></div>
<div class="image" style="--w:150px;--h:150px;"></div>