How to make the checkbox to cover 100% width and 100% height of a sqaure container?
<p>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.</p>

<p>Here is my codepen: <a href="http://codepen.io/PiotrBerebecki/pen/yadEOP" rel="nofollow">http://codepen.io/PiotrBerebecki/pen/yadEOP</a>
where at the moment I just temporarily hardcoded the width and the height of the checkbox.</p>

<p><strong>HTML:</strong></p>

<pre><code>&lt;div id="container"&gt;
  &lt;input type="checkbox"&gt;
  &lt;img src="http://placekitten.com/400/400"&gt;
&lt;/div&gt;
</code></pre>

<p><strong>CSS:</strong></p>

<pre><code>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;
}
</code></pre>