1

我试图弄清楚，是否有任何方法可以使用 css 调整图像的剪切部分的大小。在最受期待的版本中，以这种方式调整大小的图像应该保持强加的纵横比。

我正在使用剪辑路径，尝试两种方法（svg & inset()），以及解决对象位置和对象拟合参数，不幸的是我无法达到预期的结果:(

这是我的实际代码。我需要剪切的图像适合图片元素的大小（图片的背景应该被剪切的图像覆盖）

案例研究 https://imgur.com/DR9Lrng

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>

4

1 回答 1

2

这是一个计算转换剪辑路径的值并将它们与顶部/左侧和高度/宽度一起使用的想法。我考虑了 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>

于 2020-05-16T11:58:53.150 回答