CSS3 polygons with images, how to?

Question

How can i do this shapes with image inside each block? Each block will have 100% width. Take a look at the example:

https://i.stack.imgur.com/K5e9u.jpg

I have here the polygon, but how can i make it 100% of svg and with a full image background without losing aspect ratio?

`https://jsfiddle.net/acrr120/t9y950qy/`

Answer 1

Just wrap your svg in a container and give the height you want and give also overflow:hidden by this way you will define the height you want and respecting the ratio for the svg

.container {
  height: 500px;
  overflow: hidden;
}

<div class="container">
    <svg width="100%" viewBox="0 0 100 100" style="border:1px solid red">
      <polygon points="0,0 30,10 100,10 100,100 0,100" fill="red" />
    </svg>
</div>