Fitting img inside div
<p>I have an div </p>



<p>which I keep box shaped all the time using:</p>

<pre><code>div{
    float:left;
    width:  447px;
    height:     445px;
    background-color: blue;
}


div:after{
   content: "";
   display: block;
   padding-bottom:100%
}
</code></pre>

<p>the problem occurs when I want to add an image to the div</p>

<pre><code>&lt;div&gt;&lt;img src="as.jpg"&gt;&lt;/div&gt;
</code></pre>

<p>using: </p>

<pre><code>img{
  width:100%;
  height:100%;
}
</code></pre>

<p>Does one of the two things: </p>

<ol>
<li><p>the image does not cover whole div </p></li>
<li><p>the image does not cover whole div and box shape is ruined</p></li>
</ol>

<p>Is there a way how to fix this? <a href="https://jsfiddle.net/ddbpd98c/" rel="nofollow">Demo</a></p>