用CSS调整图片的剪切部分大小

Question

我想知道，是否有任何方法可以使用css调整图像的剪切部分。在最期望的版本中，这样调整图像的大小应该保持所施加的纵横比。

我在玩 clip-path，尝试了两种方法(svg & inset())，以及使用 object-position & object-fit 参数，遗憾的是我不能达到预期的效果 :(

这是我的实际代码。我需要剪下的图片适合图片元素的大小(图片的背景应该被剪下的图片覆盖)

案例研究https:/imgur.comDR9Lrng

picture {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  overflow: hidden;
  background: #ddd;
}

picture.ratio-3-4 {
  padding-top: 133.3%;
}

picture img.clip {
  position: absolute;
  top: 0;
  left: 0;
  -webkit-clip-path: inset(0 33.7% 7.6% 0);
  clip-path: inset(0 33.7% 7.6% 0);
}

<picture class="ratio-3-4">
  <img src="https://images.unsplash.com/photo-1551927336-09d50efd69cd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2710&q=80" class="clip" alt="">
</picture>

Answer 1

这里有一个计算的想法，翻译剪贴路径的值，并使用它们与topleft和heightwidth。我考虑了CSS变量，所以你可以很容易理解的逻辑，并与两种方法进行比较。我考虑了无单位的值，以后会在计算中加入百分比。

:root {
  --top:5;
  --left:10;
  --right:10;
  --bottom:10;
}

picture {
  position: relative;
  display: inline-block;
  width: 300px;
  overflow: hidden;
  background: #ddd;
  border:2px solid red;
}

picture.ratio-3-4::before {
 content:"";
 display:block;
  padding-top: 133.3%;
}

picture.ratio-1-1::before {
 content:"";
 display:block;
  padding-top: 100%;
}

picture img.clip {
  position: absolute;
  top:   calc((var(--top) *-100%)/ (100 - (var(--top) + var(--bottom)) ));
  left:  calc((var(--left)*-100%)/ (100 - (var(--left) + var(--right)) ));
  width: calc(10000%/ (100 - (var(--left) + var(--right)) ));
  height:calc(10000%/ (100 - (var(--top) + var(--bottom)) ));
}

img {
 width:300px;
  clip-path: 
    inset(calc(var(--top)*1%)    calc(var(--right)*1%) 
          calc(var(--bottom)*1%) calc(var(--left)*1%) );
}

<img src="https://i.stack.imgur.com/5vZ65.jpg" class="clip" >

<picture class="ratio-3-4">
  <img src="https://i.stack.imgur.com/5vZ65.jpg" class="clip" >
</picture>

<picture class="ratio-1-1">
  <img src="https://i.stack.imgur.com/5vZ65.jpg" class="clip" >
</picture>

你只需要调整你想要的值就可以了。

:root {
  --top:15;
  --left:0;
  --right:50;
  --bottom:0;
}

picture {
  position: relative;
  display: inline-block;
  width: 300px;
  overflow: hidden;
  background: #ddd;
  border:2px solid red;
}

picture.ratio-3-4::before {
 content:"";
 display:block;
  padding-top: 133.3%;
}

picture.ratio-1-1::before {
 content:"";
 display:block;
  padding-top: 100%;
}

picture img.clip {
  position: absolute;
  top:   calc((var(--top) *-100%)/ (100 - (var(--top) + var(--bottom)) ));
  left:  calc((var(--left)*-100%)/ (100 - (var(--left) + var(--right)) ));
  width: calc(10000%/ (100 - (var(--left) + var(--right)) ));
  height:calc(10000%/ (100 - (var(--top) + var(--bottom)) ));
}

img {
 width:300px;
  clip-path: 
    inset(calc(var(--top)*1%)    calc(var(--right)*1%) 
          calc(var(--bottom)*1%) calc(var(--left)*1%) );
}

<img src="https://i.stack.imgur.com/5vZ65.jpg" class="clip">

<picture class="ratio-3-4">
  <img src="https://i.stack.imgur.com/5vZ65.jpg" class="clip">
</picture>

<picture class="ratio-1-1">
  <img src="https://i.stack.imgur.com/5vZ65.jpg" class="clip">
</picture>

稍后你可以将它们作为内联样式添加。

:root {
  --top:15;
  --left:0;
  --right:50;
  --bottom:0;
}

picture {
  position: relative;
  display: inline-block;
  width: 300px;
  overflow: hidden;
  background: #ddd;
  border:2px solid red;
}

picture.ratio-3-4::before {
 content:"";
 display:block;
  padding-top: 133.3%;
}


picture img.clip {
  position: absolute;
  top:   calc((var(--top) *-100%)/ (100 - (var(--top) + var(--bottom)) ));
  left:  calc((var(--left)*-100%)/ (100 - (var(--left) + var(--right)) ));
  width: calc(10000%/ (100 - (var(--left) + var(--right)) ));
  height:calc(10000%/ (100 - (var(--top) + var(--bottom)) ));
}

img {
 width:300px;
  clip-path: 
    inset(calc(var(--top)*1%)    calc(var(--right)*1%) 
          calc(var(--bottom)*1%) calc(var(--left)*1%) );
}

<picture class="ratio-3-4" style="--top:10;--left:50;--bottom:10;--right:0">
  <img src="https://i.stack.imgur.com/5vZ65.jpg" class="clip" >
</picture>

<picture class="ratio-3-4" style="--top:10;--left:0;--bottom:10;--right:0">
  <img src="https://i.stack.imgur.com/5vZ65.jpg" class="clip" >
</picture>

<picture class="ratio-3-4" style="--top:0;--left:0;--bottom:50;--right:0">
  <img src="https://i.stack.imgur.com/5vZ65.jpg" class="clip">
</picture>

如果你想用像素值，你可以调整如下代码。

picture {
  position: relative;
  display: inline-block;
  width: 300px;
  overflow: hidden;
  background: #ddd;
  border:2px solid red;
}

picture.ratio-3-4::before {
 content:"";
 display:block;
  padding-top: 133.3%;
}


picture img.clip {
  position: absolute;
  top:   calc( -1*var(--top));
  left:  calc( -1*var(--left));
  width: calc(100% + var(--left) + var(--right));
  height:calc(100% + var(--top) + var(--bottom));
}

img {
 width:300px;
  clip-path: 
    inset(calc(var(--top))    calc(var(--right)) 
          calc(var(--bottom)) calc(var(--left)) );
}

<picture class="ratio-3-4" style="--top:10px;--left:150px;--bottom:10px;--right:0px">
  <img src="https://i.stack.imgur.com/5vZ65.jpg" class="clip">
</picture>

<picture class="ratio-3-4" style="--top:100px;--left:0px;--bottom:200px;--right:0px">
  <img src="https://i.stack.imgur.com/5vZ65.jpg" class="clip" >
</picture>

<picture class="ratio-3-4" style="--top:0px;--left:0px;--bottom:300px;--right:120px">
  <img src="https://i.stack.imgur.com/5vZ65.jpg" class="clip" >
</picture>