CODEWITHSUNDEEP
css
Ravi Yadav
Ravi Yadav

Reputation: 737

unable to remove the empty spaces around image after using clip-path

I am unable to remove the empty spaces around this clipped image. The original size of the image is 1200x800 but I want to show only a small section of this image at a certain point on the page. But in the background it still takes the size of the entire image creating all the space between the header, image and the content. Here's my Plunker code

CSS

img {
    max-width: 100%;
    clip-path: inset(248px 0 238px 0);
}

HTML

  <body>
    <h1>Header Here</h1>
    <img src="http://via.placeholder.com/1200x800" alt="image" />
    <div>
      Contrary to popular belief, Lorem Ipsum is not simply random text.....
    </div>
  </body>

Upvotes: 3

Views: 2426

Answers (2)

Chris Lane Jones
Chris Lane Jones

Reputation: 1

I was able to make it work by using the tool https://bennettfeely.com/clippy/.

I moved each of the points in the white space back 5%. This will give the clip-path mask more breathing room or bleed space.

Giving the path less space gives the image more room.

Upvotes: 0

Jayshree
Jayshree

Reputation: 34

You can use this code for your solution:

    #img {
      position: relative;
      width: 800px;
      height: 100px;
      overflow: hidden;
    }
    img {
        max-width: 100%;
        position: absolute;
        top: -220px;
       left: 0;
    }
    <div id="img">
        <img src="http://via.placeholder.com/1200x800" alt="image" />
    </div>

Upvotes: 1

Related Questions