Skewing image without distorting it

Question

Can i do this effect on an image without distorting it? i tried the skew effect using css but it rotates the image somehow and crops half of it, i want it to stay as it is in it's position with the same size and everything but with the edges like the image attached, and here is my code:

div.skewed {
  position: relative;
  height: 140px;
  transform: skew(-2deg) rotate(2deg);
  -webkit-transform: skew(-2deg) rotate(2deg);
  -moz-transform: skew(-2deg) rotate(2deg);
  overflow: hidden;
}

div.skewed > * {
  width: 110%;
  position: absolute;
  top: 50%;
  transform: skew(2deg) rotate(-2deg) translateY(-50%);
  -webkit-transform: skew(2deg) rotate(-2deg) translateY(-50%);
  -moz-transform: skew(2deg) rotate(-2deg) translateY(-50%);
}

<div class="skewed">
  <img src="https://www.todaysparent.com/wp-content/uploads/2013/04/sleeping-baby-article.jpg">
</div>

Answer 1

You can use clip-path to crop an image without distorting it. With the polygon function you can specify a custom shape by providing a list of x,y coordinates of the single corners. It is even responsive if you use a relative unit like %.

img {
  width: 25%; /* for demonstration purposes */
  clip-path: polygon(0 0, 60% 0, 100% 30%, 100% 100%, 0 70%);
}

<img src="https://www.todaysparent.com/wp-content/uploads/2013/04/sleeping-baby-article.jpg">

The good

• A minimum of code required (only 1 simple CSS rule)
• Transparency is kept (you can set any background)
• Responsive (you can easily scale the image)

The not so good

• Browser compatibility