clip-path takes up space for the whole image?

Question

I'm trying to show only a part of the image, but it takes up the height inside my box for the whole image when I only want to take up the height for the part I'm showing.

In my example code below, note the light blue background showing behind the image.
How can I prevent this?

span {
  float: left;
  background-color: lightblue;
}
img {
  clip-path: polygon(0 0, 100% 0, 100% 64%, 0 64%);
}

<span>
  <img src="//via.placeholder.com/350x150">
</span>

@showdev I accidentally pasted the wrong code version, I've added it now. — burido, Mar 02 '18 at 19:04
I see. Do you mean that the image with `clip-path` still takes up the full height of the unclipped image? — showdev, Mar 02 '18 at 19:06
Yes, I'm trying to stop it taking the full height and only take height of the part that's clipped. — burido, Mar 02 '18 at 19:08

Temani Afif · Accepted Answer · 2018-03-02T20:13:36.693

1

Apply the clip-path to the span instead But be aware that clip-path doesn't remove the non-visible part.

span {
  float: left;
  background-color: lightblue;
  clip-path: polygon(0 0, 100% 0, 100% 64%, 0 64%);
}
p {
 clear:both;
}

<span>
  <img src="//via.placeholder.com/350x150">
</span>
<p>some text here</p>

You can avoid the clip-path by using fixed height on the span and setting overflow:hidden and in this case you will remove the non-needed part:

span {
  float: left;
  background-color: lightblue;
  height:100px;
  overflow:hidden;
}
p {
  clear:both;
}

<span>
  <img src="//via.placeholder.com/350x150">
</span>
<p>some text here</p>

Another idea is to also use the image as background:

span {
  float: left;
  background-color: lightblue;
  height:100px;
  width:350px;
}
p {
  clear:both;
}

<span style="background-image:url(//via.placeholder.com/350x150)">
</span>
<p>some text here</p>

edited Mar 02 '18 at 20:13

answered Mar 02 '18 at 19:14

Temani Afif

245,468
26
309
415

@showdev yes and in this case he need to understand how clip-path work ... it clip and it doens't cut – Temani Afif Mar 02 '18 at 19:23
1

This still shows the space at the bottom of the box. – burido Mar 02 '18 at 19:25
@burido yes ;) this the behavior of clip-path ... iadded more explanation and an alternative – Temani Afif Mar 02 '18 at 19:26
The alternative still doesn't fix this. – burido Mar 02 '18 at 19:29
@burido how it doesn't fix ? :) – Temani Afif Mar 02 '18 at 19:31
`

` – burido Mar 02 '18 at 19:34
2

UPDATE: After changing the height to 50px, it fixed it. Thank you! – burido Mar 02 '18 at 19:36

clip-path takes up space for the whole image?

1 Answers1