CODEWITHSUNDEEP
css
Matt
Matt

Reputation: 826

How to expand a cropped image into a box?

I am given a JPEG image which needs to be cropped using CSS and then expanded to fit a 1200px x 1000px box.

Here is what I have so far:

#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">

The clip-path property crops the original image which is 750px x 500px. When I set width and height to values mentioned in the above snippet, two problems occur:

Update 1: I can solve the first issues by using percentages instead of pixels.

Upvotes: 1

Views: 60

Answers (1)

Temani Afif
Temani Afif

Reputation: 273540

Use background for this and adjust 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>

The above one will crop pixel based on the container. In case you need to crop based on the image size you do this:

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

Your image has a height of 500px and you want to crop 45px thus we will have 455px that need to cover 1000px so we need to multiply by 1000/455. Same logic with the width. For the position we need to shift by the 103px crop considering the same multiplication.

We can also write this differently.

I will use the below image (300x150) that I will crop 100px from the left, 60px from the right, 10px from the top and 45px from the bottom. Then it will cover a container with a dimension of 400x200. We should only see the yellow part.

enter image description here

.image {
    display: block;
    margin:5px;
    width: 400px;
    height: 200px;
    background-image:url(https://i.sstatic.net/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>

We can take the last syntax and consider more variable to have some more dynamic and responsive:

.image {
    display: block;
    margin:5px;
    width: var(--w,400px);
    height: var(--h,200px);
    background-image:url(https://i.sstatic.net/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>

Upvotes: 1

Related Questions