CODEWITHSUNDEEP
htmlcssclipimage-clipping
burido
burido

Reputation: 63

clip-path takes up space for the whole image?

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>

Upvotes: 1

Views: 1937

Answers (1)

Temani Afif
Temani Afif

Reputation: 272901

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>

Upvotes: 1

Related Questions