Resizing clipped part of the image with CSS

Question

I am trying to figure out, if there is any way to resize the clipped part of the image with use of css. In the most expected version, image resized this way should keep the imposed aspect ratio.

I was playing with clip-path, trying both approaches (svg & inset()), as well as working around object-position & object-fit parameters, unfortunately I can not achieve expected result :(

Here is my actual code. I need the clipped image to fit the size of the picture element (the background of picture should be covered by the clipped image)

CASE STUDY https://i.stack.imgur.com/Vx3Md.jpg

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>

if you can take a screenshot of your website where you are showing the issue and the expected result it would be good and will keep this question relevant — Temani Afif, May 17 '20 at 20:57

Temani Afif · Accepted Answer · 2020-05-17T20:55:47.837

Here is an idea of a calculation to translate the value of the clip-path and use them with top/left and height/width. I considered CSS variables so you can easily understand the logic and compare with both method. I considered uniteless value and later will add the percentage in the calculate.

: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>

You simply need to adjust the values like you want:

: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>

And later you can add them as inline style:

: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>

If you want to work with pixel value you can adjust the code like below:

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>

Thank you! This is awesome and basically solve the question. Unfortunately will be hard to use, as long as it is not responsive :( When scaling, pictures change location — dra89szka, May 17 '20 at 18:47
@dra89szka the percentage value method is responsive (the first and second snippet). Only the pixel value is not — Temani Afif, May 17 '20 at 19:04
@dra89szka there is a style applied to your image (max-width: 100%) that you need to remove — Temani Afif, May 17 '20 at 20:30
I removed the comment, so my address won't be visible, but IT WORKS AS CHARM :) Thanks for your help! — dra89szka, May 17 '20 at 20:48

Resizing clipped part of the image with CSS

1 Answers1