How to make the checkbox to cover 100% width and 100% height of a sqaure container?

I've been able to place a checkbox on top of a dynamically sized (responsive) div but now I need to make it so that the checkbox covers 100% width and 100% height of this div.

Here is my codepen: http://ift.tt/2f7hKFG where at the moment I just temporarily hardcoded the width and the height of the checkbox.

HTML:

<div id="container">
  <input type="checkbox">
  <img src="http://ift.tt/29IYa3F">
</div>

CSS:

body {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#container {
  width: 50%;
  border: solid 4px tomato;
}

img {
  display: block;
  width: 100%;
  height: auto;
}

input {
  position: absolute;
  width: 100px;
  height: 100px;
  opacity: 0.75;
}