I'm using Clip-path to cut around an image to make it a smaller rectangle than before. However the box I'm putting it in is treating it like the rest of the image is still there. Is there a way to get rid of the excess portion of the image and just use the clip-path portion of the image?

.image {
  width: 20%;
  height: 20%; 
  clip-path: inset(70% 22% 11% 22%); 
  box-shadow: inset 0 0 10px #000000;
}

I'm trying to fit only that portion of the image somewhere. Outside of forcing it using negative/overlapping the cutout portion, is there another way to go about it?

.clipimage {
  width: 20%;
  height: 20%; 
  clip-path: inset(70% 22% 11% 22%); 
  box-shadow: inset 0 0 10px #000000;
}

.noimage {
  width: 20%;
  height: 20%;  
  box-shadow: inset 0 0 10px #000000;
}

.redsquare {
  width: auto;  
  background-color: red;
}


p {
  color: black;
} 

<div class="redsquare">
<p>This paragraph before clip image.</p>
<div class="clipimage"> 
<img src=".jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"; width="350" height="520">
</div>
</div>
<div class="redsquare">
<p>This paragraph before noclip image.</p>
<div class="noclipimage"> 
<img src=".jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"; width="350" height="520">
</div>
</div>

I'm using Clip-path to cut around an image to make it a smaller rectangle than before. However the box I'm putting it in is treating it like the rest of the image is still there. Is there a way to get rid of the excess portion of the image and just use the clip-path portion of the image?

.image {
  width: 20%;
  height: 20%; 
  clip-path: inset(70% 22% 11% 22%); 
  box-shadow: inset 0 0 10px #000000;
}

I'm trying to fit only that portion of the image somewhere. Outside of forcing it using negative/overlapping the cutout portion, is there another way to go about it?

.clipimage {
  width: 20%;
  height: 20%; 
  clip-path: inset(70% 22% 11% 22%); 
  box-shadow: inset 0 0 10px #000000;
}

.noimage {
  width: 20%;
  height: 20%;  
  box-shadow: inset 0 0 10px #000000;
}

.redsquare {
  width: auto;  
  background-color: red;
}


p {
  color: black;
} 

<div class="redsquare">
<p>This paragraph before clip image.</p>
<div class="clipimage"> 
<img src="https://images.pexels/photos/19577082/pexels-photo-19577082/free-photo-of-city-skyline-at-dusk.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"; width="350" height="520">
</div>
</div>
<div class="redsquare">
<p>This paragraph before noclip image.</p>
<div class="noclipimage"> 
<img src="https://images.pexels/photos/19577082/pexels-photo-19577082/free-photo-of-city-skyline-at-dusk.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"; width="350" height="520">
</div>
</div>

• css

• 2 That's what a clip-path does. It hides part of the image, it doesn't actually remove it. – Paulie_D Commented Feb 3 at 8:38
• Could you describe what you mean by 'use' the rest of the image? Do you want an element of a definite size 'left' behind? – A Haworth Commented Feb 3 at 9:51
• I want to basically 'crop' and 'trim' the image away. Option A is create roughly 150 mini images, I'm hoping there was a way to do it with just CSS. – ProjectPokket Commented Feb 3 at 9:57
• 1 Why not make the containing div the size you want and then position the image as a background in the appropriate place? – A Haworth Commented Feb 3 at 10:10
• Could you show me an example of that? I'm not quite sure what you mean. – ProjectPokket Commented Feb 3 at 10:40

1 Answer 1

Use object-fit: cover. That’s the easiest way to turn a bunch of randomly sized and shaped images into neat thumbnails.

body {
  background: black;
  color: white;
  margin: 1em;
}

img {
  border: 2px solid white;
}

.gallery {
  display: flex;
  gap: 1em;
}

.gallery img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  object-position: center;
}

<p>random images</p>
<img src="https://picsum.photos/id/670/100/200">
<img src="https://picsum.photos/id/1072/200/100">
<img src="https://picsum.photos/id/1074/150">

<p>turned into a gallery, cropped with object-fit: cover</p>
<div class="gallery">
  <img src="https://picsum.photos/id/670/100/200">
  <img src="https://picsum.photos/id/1072/200/100">
  <img src="https://picsum.photos/id/1074/150">
</div>