How to make a rhomboid with a picture inside?

Question

css

I make a block with a picture inside, I add skewY(-20deg) distortion to the block, and skewY(20deg) compensation to the picture inside, but then I get empty corners at the bottom and top.
Moreover, this block must have a border and box-shadow.
I can't figure out how to implement it, please help.
The clip-path method doesn't work because IE 10+.
UPD: How can teeth be removed after such a transformation?

Answer 1

The height of the image should be greater than the original height of the rectangle - after all, when distorted, it increases. Should be something like this .

Answer 2

overflow:hidden;
on the container
in the picture

Answer 3

For example: codepen.io/anon/pen/RWLyWX