使用 CSS 调整图像的裁剪部分
Resizing clipped part of the image with CSS
我想知道是否有任何方法可以使用 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>
这是一个计算的想法,用于转换剪辑路径的值并将它们与 top/left 和 height/width 一起使用。我考虑了 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>
我想知道是否有任何方法可以使用 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>
这是一个计算的想法,用于转换剪辑路径的值并将它们与 top/left 和 height/width 一起使用。我考虑了 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>